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

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   lt form name  enquiry form  method  post  id  enquiry form  gt       Full Name        lt input class  input-style  name  name   id  name  type  text  required gt       Email        lt input class  input-style  name  email   id  email  type  email  required gt      Phone         lt input name  mobile   id  mobile  type  number  required gt        lt input type  submit  value  SUBMIT   id  enq submit   gt    lt  form gt

User · Answer

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  
      }
      });

User · Answer

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    x000D   x000D      phone   keydown function event    x000D    k   event which  x000D    if   k  gt   96  amp  amp  k  lt   105     k    8    x000D      if    this  val   length    10    x000D        if  k    8    x000D          return true  x000D          else   x000D          event preventDefault    x000D          return false  x000D   x000D          x000D        x000D      else   x000D      event preventDefault    x000D      return false  x000D      x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input name  phone  id  phone  placeholder  Mobile Number  class  form-control  type  number  required gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

ready function            validator addMethod               quot tendigits quot               function  value  element                    if  value     quot  quot                       return false                  return value match    d 10                                  quot Please enter 10 digits Contact    No spaces or dash  quot                          frm registration   validate           rules                phone   quot tendigits quot                     messages                phone   quot Please enter 10 digits Contact    No spaces or dash  quot

User · Answer

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  lt  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

User · Answer

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    lt input type  tel  minlength  10  maxlength  10  id  mobile  name  mobile  title  10 digit mobile number  required gt        mob frm   submit function e                e preventDefault                if      mobile   val   match   0-9  10                        alert  Please put 10 digit mobile number                    return

User · Answer

Check this validation library Files   http   bassistance de jquery-plugins jquery-plugin-validation  Demo    http   jquery bassistance de validate demo

User · Answer

for email validation   lt input type  quot email quot  gt  is enough   for mobile no use pattern attribute for input as follows   lt input type  quot number quot  pattern  quot  d 3   -  d 3   -  d 4  quot  required gt   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    quot  0C6 quot       var badColor    quot  FF9B37 quot          if mobile value length  10                   mobile style backgroundColor   badColor          message style color   badColor          message innerHTML    quot required 10 digits  match requested format  quot          and your HTML code should be   lt input name  quot mobile quot   id  quot mobile quot  type  quot number quot  required onkeyup  quot check    return false  quot   gt  lt span id  quot message quot  gt  lt  span gt

User · Answer

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  gt  31  amp  amp   charCode  lt  48    charCode  gt  57         NumValue length  gt  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  lt  10          txtMobile  css  border-color    red        return false      txtMobile  css  border-color       return true     function isNumeric n    return  isNaN parseFloat n    amp  amp  isFinite n

User · Answer

x000D   x000D  var message   document getElementById  contact-error    x000D      contact   focusout function    x000D   if    this  val   match   0-9  10        x000D        contact-error   addClass  contact-message    x000D          message innerHTML    required 10 digits  match requested format    x000D       else   x000D           contact-error   removeClass  contact-message    x000D       message innerHTML       x000D        x000D     x000D   contact-message   x000D      display  block  x000D      margin-bottom  20px  x000D      color   cc0033  x000D    x000D   lt input type  text  id  contact  required gt  x000D   lt span id  contact-error  gt  lt  span gt  x000D   x000D   x000D

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

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to html