How to Do Validation for 10 Digit Mobile Number Using Jquery

$(document).ready(function(){    $("#mobile-num").on("blur", function(){        var mobNum = $(this).val();        var filter = /^\d*(?:\.\d{1,2})?$/;
          if (filter.test(mobNum)) {            if(mobNum.length==10){                  alert("valid");              $("#mobile-valid").removeClass("hidden");              $("#folio-invalid").addClass("hidden");             } else {                alert('Please put 10  digit mobile number');               $("#folio-invalid").removeClass("hidden");               $("#mobile-valid").addClass("hidden");                return false;              }            }            else {              alert('Not a valid number');              $("#folio-invalid").removeClass("hidden");              $("#mobile-valid").addClass("hidden");              return false;           }      });  });

.hidden{  display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mobile">   <div class="input">  <div class="label">    <div class="label-1">   <span id="mobile-valid" class="hidden mob">    <i class="fa fa-check pwd-valid"></i>Valid Mobile No   </span>     <span id="folio-invalid" class="hidden mob-helpers">    <i class="fa fa-times mobile-invalid"></i>Invalid mobile No   </span>    </div>  </div>  <div class="row">    <div class="col-xs-3">   <div class="label-2">     Mobile No   </div>    </div>    <div class="col-xs-9">   <input id="mobile-num" type="text" class="form-control form-change-element" />    </div>  </div>   </div> </div>

Validation for 10 digit mobile number and focus input field on invalid

for email validation, <input type="email"> is enough..

for mobile no use pattern attribute for input as follows:

<input type="number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" required>

you can check for more patterns on http://html5pattern.com.

for focusing on field, you can use onkeyup() event as:

function check()
{

    var mobile = document.getElementById('mobile');
   
    
    var message = document.getElementById('message');

   var goodColor = "#0C6";
    var badColor = "#FF9B37";
  
    if(mobile.value.length!=10){
       
        mobile.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "required 10 digits, match requested format!"
    }}

and your HTML code should be:

<input name="mobile"  id="mobile" type="number" required onkeyup="check(); return false;" ><span id="message"></span>

Mobile number validation not working properly using jquery validation

Using addMethod

$(document).ready(function() {                $.validator.addMethod(                    "mobileValidation",                    function(value, element) {                        return !/^\d{8}$|^\d{10}$/.test(value) ? false : true;                    },                    "Mobile number invalid"                );
                $("#form").validate({                    rules: {                        mobile: {                            required: true,                            mobileValidation: $("#mobile").val(),                        },                    },                });            });

 <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.min.js"></script>        <form id="form">            <input type="number" id="mobile" name="mobile" />            <input type="submit" name="submit" value="submit" />        </form>

^\+(?=.{15})\d{10,15}_{0,5}$

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="phone-number"/>

$(document).on('input','#phone-number',function(){
    var phone=$('#phone-number').val();
   if(phone.indexOf('0')!==0){
     alert('First number must be 0');
     $('#phone-number').val('');
   }
});

$("#ph").change(function() {
        var a = $("#ph").val();
        var filter = /^[7-9][0-9]{9}$/;

        if (filter.test(a)) {
            alert("valid");
        }
        else {
            alert("not valid");
        }
    });