<form action=demo.php method="post">
<div >
        <label class="control-label" for="email">Your email address/Mobile number</label>
        <div class="controls">
            <input type="email"  name="email" required />

        </div>
    </div>

    <input type="submit" name="submit">Submit</button>
</form>

function validateEmail() {
    var email = document.getElementById('txtEmail');
    var mailFormat = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})|([0-9]{10})+$/;
    if (email.value == "") {
        alert( "  Please enter your Email or Phone Number  ");
    }
    else if (!mailFormat.test(email.value)) {
        alert( "  Email Address / Phone number is not valid, Please provide a valid Email or phone number ");
        return false;
    }
    else {
        alert(" Success ");
    }
}

<script>
        $(document).ready(function () {
           $("#cuntryCode").hide();
            $("#useridInput").on('input', function () {
                var len = $("#useridInput").val().length;
                if (len >= 2) {
                    var VAL = this.value;
                    var intRegex = /^[1-9][0-9]*([.][0-9]{2}|)$/;
                    if (!intRegex.test(VAL)) {
                        $('#error-caption').html('Invalid email. Please check spelling.');
                        $('#error-caption').css('color', 'red');
                        $("#cuntryCode").hide();
                    } else {
                     if(len < 10){
                        $('#error-caption').html('Invalid mobile number. Please try again.');
                        $('#error-caption').css('color', 'red');
                        $("#cuntryCode").show();
                      }else{
                        $('#error-caption').html('Invalid mobile number. length must be 10 digit.');
                        $('#error-caption').css('color', 'red');
                    }
                  }
                }else{
                   $("#cuntryCode").hide();
                   $('#error-caption').html('');
                }

            });
        });

    </script>



<form class="push--top-small forward" method="POST" data-reactid="15">
            <h4 id="input-title" data-reactid="16">Welcome back
            </h4>
            <label class="label" id="input-label" for="useridInput" data-reactid="17">Sign in with your email address or mobile number.
            </label>
            <div style="margin-bottom:24px;" data-reactid="18">
              <div >
                <div id="cuntryCode" class="_style_4kEO6r" style="float: left; height: 44px; line-height: 44px;">
                  <div tabindex="0" > +241
                  </div>
                </div>
                <div style="display:flex;">
                  <input id="useridInput" autocorrect="off" autocapitalize="off" name="textInputValue" class="text-input" placeholder="Email or mobile number" aria-required="true" aria-invalid="false" aria-describedby="error-caption input-title">
                </div>
              </div>
              <div id="error-caption">
              </div>
            </div>
            <button class="btn btn--arrow btn--full" data-reactid="24">
              <span class="push-small--right" data-reactid="25">Next
              </span>
            </button>
          </form>