Validating Phone Numbers Using Javascript

Question

I m working on a web form with several fields and a submit button  When the button is clicked  I have to verify that the required text boxes have been filled in and that the phone number is in the correct format  I can only accept 7 or 10 digit phone numbers  but characters such as       -   etc are acceptable  If this box is empty or the phone number isn t in the correct format  not 7 or 10 numbers long  not a number  or has been left blank  I have to add a red border around the text box  This border is supposed to remain in place until the user corrects the error    I can t get this to work properly  I have tried several different ways to go about doing this  but have gotten several different types of errors  One way seemed to work  but the red border only displayed for a second and then disappeared and the value in the textbox was reset    Here is my code and a link to a jsfiddle I ve created   Javascript    lt script type  text javascript  gt      function validateForm             return checkPhone              function checkPhone             var phone   document forms  myForm    phone   value          var phoneNum          0-9  3      -      0-9  3   -      0-9  4                   if phone value match phoneNum                     return true                            else                   document getElementById  phone   className   document getElementById  phone   className     error                   return false                           lt  script gt    HTML    lt form name  myForm  onsubmit    return validateForm    gt      Phone Number   lt input type  text  id  phone  gt  lt br gt   lt  form gt    JSFiddle   http   jsfiddle net mkdsjc0p

User · Answer

To validate Phone number using regular expression in java script.

In india phone is 10 digit and starting digits are 6,7,8 and 9.

Javascript and HTML code:

_x000D_

function validate()
{
  var text = document.getElementById("pno").value;
  var regx = /^[6-9]\d{9}$/ ;
  if(regx.test(text))
    alert("valid");
  else
    alert("invalid");
}

_x000D_

<html>
    <head>
        <title>JS compiler - knox97</title>
  </head>
  <body>
  <input id="pno" placeholder="phonenumber" type="tel" maxlength="10" > 
    </br></br>
    <button onclick="validate()" type="button">submit</button>
  </body>
</html>

_x000D_

User · Answer

x000D   x000D  function telephoneCheck str    x000D    var a      1 s 1        d 3      d 3    -  s    d 3    -  s    d 4     test str   x000D    alert a   x000D    x000D  telephoneCheck   555  555-5555    x000D   x000D   x000D    Where str could be any of these formats  555-555-5555  555 555-5555  555  555-5555 555 555 5555 5555555555 1 555 555 5555

User · Answer

if  charCode  gt  47  amp  amp  charCode  lt  58        document getElementById  error   innerHTML     Please Enter Your Name Only       document getElementById  fullname   focus        document getElementById  fullname   style borderColor    red       return false    else       document getElementById  error   innerHTML           document getElementById  fullname   style borderColor           return true

User · Answer

Having seen simply too many edge cases  I went for a simpler check      0-9       -                        ext x   1 20    The first thing one may point out is allowing repetition of  quot ext quot   but the purpose of this regex is to prevent users from accidentally entering email ids etc  instead of phone numbers  which it does

User · Answer

lt  DOCTYPE html gt   lt html gt       lt head gt           lt style gt              container  1                 max-width  450px                 font-family   Lucida Sans    Lucida Sans Regular    Lucida Grande    Lucida Sans Unicode   Geneva  Verdana  sans-serif                           container  1 label                 display  block                 margin-bottom  10px                           container  1 label  gt  span                 float  left                 width  100px                 color   F072A9                 font-weight  bold                 font-size  13px                 text-shadow  1px 1px 1px  fff                           container  1 fieldset                 border-radius  10px                 -webkit-border-radious 10px                 -moz-border-radoius  10px                 margin  0px 0px 0px 0px                 border  1px solid  FFD2D2                 padding  20px                 background  FFF4F4                  box-shadow  inset 0px 0px 15px  FFE5E5                             container  1 fieldset legend                 color   FFA0C9                 border-top  1px solid  FFD2D2                  border-left  1px solid  FFD2D2                  border-right  1px solid  FFD2D2                  border-radius  5px 5px 0px 0px                 background   FFF4F4                 padding  0px 8px 3px 8px                 box-shadow  -0px -1px 2px  F1F1F1                 font-weight  normal                 font-size  12px                           container  1 textarea                 width  250px                 height  100px               container  1 input type text               container  1 input type email               container  1 select                 border-radius  3px                 border  1px solid  FFC2DC                 outline  none                 color   F072A9                 padding  5px 8px 5px 8px                 box-shadow  inset 1px 1px 4px  FFD5E7                 background   FFEFF6                                            container  1 input type submit               container  1 input type button                  background   EB3B88                 border  1px solid  C94A81                 padding  5px 15px 5px 15px                 color   FFCBE2                 box-shadow  inset -1px -1px 3px  FF62A7                 border-radius  3px                 font-weight  bold                           required                 color  red                        lt  style gt       lt  head gt       lt body gt           lt div class  quot container  1 quot  gt               lt form name  quot RegisterForm quot  onsubmit  quot return SubmitClick    quot  gt                   lt fieldset gt                       lt legend gt Personal lt  legend gt                       lt label for  quot field1 quot  gt  lt span  gt Name lt span class  quot required quot  gt   lt  span gt  lt input id  quot name quot  type  quot text quot  class  quot input-field quot  name  quot Name quot  value  quot  quot  lt  label gt                       lt label for  quot field2 quot  gt  lt span  gt Email lt span class  quot required quot  gt   lt  span gt  lt input placeholder  quot Ex  csa123 yahoo in quot  id  quot email quot  type  quot email quot  class  quot input-field quot  name  quot Email quot  value  quot  quot  lt  label gt                       lt label for  quot field3 quot  gt  lt span  gt Phone lt span class  quot required quot  gt   lt  span gt  lt input placeholder  quot  919853004369 quot  id  quot mobile quot  type  quot text quot  class  quot input-field quot  name  quot Mobile quot  value  quot  quot  lt  label gt                       lt label for  quot field4 quot  gt                           lt span gt Subject lt  span gt                           lt select name  quot subject quot  id  quot subject quot  class  quot select-field quot  gt                               lt option value  quot none quot  gt Choose Your Sub   lt  option gt                               lt option value  quot Appointment quot  gt Appiontment lt  option gt                               lt option value  quot Interview quot  gt Interview lt  option gt                               lt option value  quot Regarding a post quot  gt Regarding a post lt  option gt                           lt  select gt                       lt  label gt                       lt label gt  lt span gt  lt  span gt  lt input type  quot submit quot    gt  lt  label gt                   lt  fieldset gt               lt  form gt           lt  div gt       lt  body gt       lt script gt          function SubmitClick             name   document querySelector   name   value           email   document querySelector   email   value           mobile   document querySelector   mobile   value           subject   document querySelector   subject   value            if  name           name    null                  alert  Enter Your Name                  document RegisterForm Name focus                  return false                          var atPos    email indexOf                var dotPos    email lastIndexOf                  if  email          atPos lt 1     dotPos - atPos  lt 2                 alert  Provide Your Correct Email address                  document RegisterForm Email focus                  return false                        var regExp       91 0-9  10               if  mobile           regExp test  mobile                  alert  Please Provide your Mobile number as Ex -  919853004369                  document RegisterForm Mobile focus                  return false                        if  subject     none                  alert  Please choose a subject                  document RegisterForm subject focus                  return false             else              alert   success    --  n Name    name    n  Mobile     mobile    n  Email    email    n  Subject    subject                                                    lt  script gt   lt  html gt

User · Answer

As for your regexp I guess it should be      0 2    -           d 0 3        -          d 0 3       -       d 3    -       d 4    But in general the presumption is not correct because one might enter something like   44 20 1234 56789 or  44  0  1234 567890 it is better to do something like this  var phone   document forms  myForm    phone   value  var phoneNum   phone replace     d  g       if phoneNum length  gt  6  amp  amp  phoneNum length  lt  11     return true       this will assure that entered value has 7 to 10 figures nevertheless what the formatting is  But you have to think about max length for number might be more than 10 as in the sample above

User · Answer

lt html gt   lt title gt Practice Session lt  title gt   lt body gt              lt form name  RegForm  onsubmit  return validate    method  post  gt     lt p gt Name   lt input type  text  name  Name  gt   lt  p gt  lt br gt           lt p gt Contact   lt input type  text  name  Telephone  gt   lt  p gt  lt br gt      lt p gt  lt input type  submit  value  send  name  Submit  gt  lt  p gt             lt  form gt    lt  body gt   lt script gt   function validate                                          var name   document forms  RegForm    Name                    var phone   document forms  RegForm    Telephone      if  name value                                             window alert  Please enter your name      name focus    return false    else if isNaN name value      d 10        alert  name confirmed      else   window alert  please enter character          if  phone value                                      window alert  Please enter your telephone number      phone focus    return false      else if  isNaN phone value    phone value    isNaN phone value       alert  number confirmed      else  window alert  please enter numbers only            lt  script gt    lt  html gt

User · Answer

Try this  I It s working    x000D   x000D   lt form gt  x000D   lt input type  text  name  mobile  pattern   1-9  1  0-9  9   title  Enter 10 digit mobile number  placeholder  Mobile number  required gt  x000D   lt button gt  x000D  Save x000D   lt  button gt  x000D   lt  form gt  x000D    x000D   x000D   x000D    https   jsfiddle net guljarpd 12b7v330

User · Answer

lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt link rel  stylesheet  type  text css  href     Homepage-30-06-2016 Css css   gt   lt title gt Form lt  title gt    lt script type  text javascript  gt           function isChar evt                evt    evt    evt   window event              var charCode    evt which    evt which   evt keyCode              if  charCode  gt  47  amp  amp  charCode  lt  58                     document getElementById  error   innerHTML     Please Enter Your Name Only                   document getElementById  fullname   focus                    document getElementById  fullname   style borderColor    red                   return false                            else                   document getElementById  error   innerHTML                       document getElementById  fullname   style borderColor                        return true                           lt  script gt   lt  head gt    lt body gt            lt h1 style  margin-left 20px  Registration Form gt Registration Form lt  h1 gt  lt hr  gt              Name   lt input id  fullname  type  text  placeholder  Full Name                    name  fullname  onKeyPress  return isChar event   onChange  return isChar event     gt  lt label id  error  gt  lt  label gt  lt br   gt  lt br   gt    lt button type  submit  id  submit  name  submit  onClick  return valid event   class  btn btn-link text-uppercase  gt  Submit now lt  button gt

[javascript] Validating Phone Numbers Using Javascript

Examples related to javascript

Examples related to html

Examples related to validation

Examples related to phone-number