验证 10 位手机号码并将输入字段聚焦在无效上

Question

I need the code for validating email and mobile number in jQuery and also focus() on that particular field where validations are not satisfied.

This is my query

<form name="enquiry_form" method="post" id="enquiry_form">

    Full Name *
    <input class="input-style" name="name"  id="name" type="text" required> 
    Email *
    <input class="input-style" name="email"  id="email" type="email" required>
    Phone * 
    <input name="mobile"  id="mobile" type="number" required>

    <input type="submit" value="SUBMIT"  id="enq_submit"">

</form>

Answer 1

Above code is correct but mobile validation is not perfect.

i modified as

$('#enquiry_form').validate({
  rules:{
  name:"required",
  email:{
  required:true,
  email:true
  },
  mobile:{
      required:true,
  minlength:9,
  maxlength:10,
  number: true
  },
  messages:{
  name:"Please enter your username..!",
  email:"Please enter your email..!",
      mobile:"Enter your mobile no"
  },
  submitHandler: function(form) {alert("working");
  //write your success code here  
  }
  });

Answer 2

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>

Answer 3

I used $form.submit() as it keeps html input validation.

Also I used input type tel as it supported by mobile browsers, only display numeric keypad.

<input type="tel" minlength="10" maxlength="10" id="mobile" name="mobile" title="10 digit mobile number" required>


$('#mob_frm').submit(function(e) {
            e.preventDefault();
            if(!$('#mobile').val().match('[0-9]{10}'))  {
                alert("Please put 10 digit mobile number");
                return;
            }  

        });

Answer 4

you can also use jquery for this

  var phoneNumber = 8882070980;
            var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;

            if (filter.test(phoneNumber)) {
              if(phoneNumber.length==10){
                   var validate = true;
              } else {
                  alert('Please put 10  digit mobile number');
                  var validate = false;
              }
            }
            else {
              alert('Not a valid number');
              var validate = false;
            }

         if(validate){
          //number is equal to 10 digit or number is not string 
          enter code here...
        }

Answer 5

After testing all answers without success. Some times input take alpha character also.

Here is the last full working code with only numbers input also keeping in mind backspace button key event for user if something number is incorrect.

 $("#phone").keydown(function(event) { k = event.which; if ((k >= 96 && k <= 105) || k == 8) { if ($(this).val().length == 10) { if (k == 8) { return true; } else { event.preventDefault(); return false; } } } else { event.preventDefault(); return false; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="phone" id="phone" placeholder="Mobile Number" class="form-control" type="number" required>

Answer 6

检查此验证库文件： http : //bassistance.de/jquery-plugins/jquery-plugin-validation/演示： http : //jquery.bassistance.de/validate/demo/

Answer 7

Use jquery validator in your script tag DEMO

<script src="js/jquery.validate.min.js"></script> 

and validate your element by like this

   <form name="enquiry_form" method="post" id="enquiry_form">

    Full Name *
    <input class="input-style" name="name"  id="name" type="text"/>
    <br>
    Email *
    <input class="input-style" name="email"  id="email" type="email"><br>
    Phone * 
        <input id="mobile" name="mobile"  id="mobile"></input><br>

    <input type="submit" value="SUBMIT"  id="enq_submit">

</form>

 $('#enquiry_form').validate({
      rules:{
      name:"required",
      email:{
      required:true,
      email:true
      },
      mobile:{
          required:true,
      minlength:9,
      maxlength:10,
      }
      },
      messages:{
      name:"Please enter your username..!",
      email:"Please enter your email..!",
          mobile:"Enter your mobile no"
      },

      submitHandler: function(form) {
alert("working");
      //write your success code here  
      }
      });

Answer 8

function is_mobile_valid(string_or_number){
            var mobile=string_or_number;
            if(mobile.length!=10){
                return false;

            }
            intRegex = /[0-9 -()+]+$/;
            is_mobile=true;
            for ( var i=0; i < 10; i++) {
                if(intRegex.test(mobile[i]))
                     { 
                     continue;
                     }
                    else{
                        is_mobile=false;
                        break;
                    }
                 }
            return is_mobile;

}

You can just check by calling the function is_mobile_valid(your_string_of_mobile_number);

Answer 9

function isMobileNumber(evt, sender) { // Allows only 10 numbers // ONKEYPRESS FUNCTION
//evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
var NumValue = $(sender).val();
if (charCode > 31 && (charCode < 48 || charCode > 57)) {//|| NumValue.length > 9) {
    return false;
}
return true;}


function isProperMobileNumber(txtMobId) { //// VALIDATOR FUNCTION   
var txtMobile = document.getElementById(txtMobId);
if (!isNumeric(txtMobile.value)) { $(txtMobile).css("border-color", "red"); return false; }
if (txtMobile.value.length < 10) {
    $(txtMobile).css("border-color", "red");
    return false;
}
$(txtMobile).css("border-color", "")
return true; }

function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n) }

Answer 10

 var message = document.getElementById('contact-error'); $('#contact').focusout(function(){ if(!$(this).val().match('[0-9]{10}')) { $('#contact-error').addClass('contact-message'); message.innerHTML = "required 10 digits, match requested format!"; }else { $('#contact-error').removeClass('contact-message'); message.innerHTML = ""; } })

 .contact-message { display: block; margin-bottom: 20px; color: #cc0033; }

 <input type="text" id="contact" required> <span id="contact-error"></span>

Answer 11

$().ready(function () {

    $.validator.addMethod(
            "tendigits",
            function (value, element) {
                if (value == "")
                    return false;
                return value.match(/^\d{10}$/);
            },
            "Please enter 10 digits Contact # (No spaces or dash)"
            );

    $('#frm_registration').validate({
        rules: {
            phone: "tendigits"
        },
        messages: {
            phone: "Please enter 10 digits Contact # (No spaces or dash)",

        }

    });

})