Tuesday, August 16, 2016

JavaScript : HTML Form - Phone Number validation

Validating phone number is an important point while validating an HTML form. In this page we have discussed how to validate a phone number (in different format) using JavaScript :

At first we validate a phone number of 10 digits with no comma, no spaces, no punctuation and there will be no + sign in front the number. Simply the validation will remove all non-digits and permit only phone numbers with 10 digits. Here is the function.
view plaincopy to clipboardprint?
  1. function phonenumber(inputtxt)  
  2. {  
  3.   var phoneno = /^\d{10}$/;  
  4.   if((inputtxt.value.match(phoneno))  
  5.         {  
  6.       return true;  
  7.         }  
  8.       else  
  9.         {  
  10.         alert("message");  
  11.         return false;  
  12.         }  
  13. }  
Flowchart :
Flowchart : JavaScript phone validation-1
To valid a phone number like
XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX
use the following code.
view plaincopy to clipboardprint?
  1. function phonenumber(inputtxt)  
  2. {  
  3.   var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;  
  4.   if((inputtxt.value.match(phoneno))  
  5.         {  
  6.       return true;  
  7.         }  
  8.       else  
  9.         {  
  10.         alert("message");  
  11.         return false;  
  12.         }  
  13. }  
Flowchart :
Flowchart : JavaScript - phone validation-2
If you want to use a + sign before the number in the following way
+XX-XXXX-XXXX
+XX.XXXX.XXXX
+XX XXXX XXXX
use the following code.
view plaincopy to clipboardprint?
  1. function phonenumber(inputtxt)  
  2. {  
  3.   var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;  
  4.   if((inputtxt.value.match(phoneno))  
  5.         {  
  6.       return true;  
  7.         }  
  8.       else  
  9.         {  
  10.         alert("message");  
  11.         return false;  
  12.         }  
  13. }  
Flowchart :
Flowchart : JavaScript - phone validation-3
Following code blocks contain actual codes for the said validations. We have kept the CSS code part common for all the validations.

CSS Code

view plaincopy to clipboardprint?
  1. li {list-style-type: none;  
  2. font-size: 16pt;  
  3. }  
  4. .mail {  
  5. margin: auto;  
  6. padding-top: 10px;  
  7. padding-bottom: 10px;  
  8. width: 400px;  
  9. background : #D8F1F8;  
  10. border: 1px soild silver;  
  11. }  
  12. .mail h2 {  
  13. margin-left: 38px;  
  14. }  
  15. input {  
  16. font-size: 20pt;  
  17. }  
  18. input:focus, textarea:focus{  
  19. background-color: lightyellow;  
  20. }  
  21. input submit {  
  22. font-size: 12pt;  
  23. }  
  24. .rq {  
  25. color: #FF0000;  
  26. font-size: 10pt;  
  27. }  
  28.               

Validate a 10 digit phone number

At first we validate a phone number of 10 digit. For example 1234567890, 0999990011, 8888855555 etc.

HTML Code

view plaincopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>JavaScript form validation - checking non-empty</title>  
  6. <link rel='stylesheet' href='form-style.css' type='text/css' />        
  7. </head><br><body onload='document.form1.text1.focus()'>  
  8. <div class="mail">  
  9. <h2>Input an Phone No.[xxxxxxxxxx] and Submit</h2>  
  10. <form name="form1" action="#">  
  11. <ul>  
  12. <li><input type='text' name='text1'/></li>  
  13. <li>&nbsp;</li>  
  14. <li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>  
  15. <li>&nbsp;</li>  
  16. </ul>  
  17. </form>  
  18. </div>  
  19. <script src="phoneno-all-numeric-validation.js"></script>  
  20. </body>  
  21. </html>  

JavaScript Code

view plaincopy to clipboardprint?
  1. function phonenumber(inputtxt)  
  2. {  
  3.   var phoneno = /^\d{10}$/;  
  4.   if(inputtxt.value.match(phoneno))  
  5.   {  
  6.       return true;  
  7.   }  
  8.   else  
  9.   {  
  10.      alert("Not a valid Phone Number");  
  11.      return false;  
  12.   }  
  13.   }  
View the example in the browser
Flowchart :
Flowchart : JavaScript - phone validation 10 digit

Validate North American phone numbers

Now, let's see how to validate a phone number, either in 222-055-9034, 321.789.4512 or 123 256 4587 format.

HTML Code

view plaincopy to clipboardprint?
  1. <!DOCTYPE html><br><html lang="en"><br><head>  
  2. <meta charset="utf-8">  
  3. <title>JavaScript form validation - checking non-empty</title>  
  4. <link rel='stylesheet' href='form-style.css' type='text/css' />        
  5. </head>  
  6. <body onload='document.form1.text1.focus()'>  
  7. <div class="mail">  
  8. <h2>Input an Phone No.[xxx-xxx-xxxx, xxx.xxx.xxxx, xxx xxx xxxx] and Submit</h2>  
  9. <form name="form1" action="#">   
  10. <ul>  
  11. <li><input type='text' name='text1'/></li>  
  12. <li>&nbsp;</li>  
  13. <li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>  
  14. <li>&nbsp;</li>  
  15. </ul>  
  16. </form>  
  17. </div>  
  18. <script src="phoneno-international-format.js"></script>  
  19. </body>  
  20. </html>  

JavaScript Code

view plaincopy to clipboardprint?
  1. function phonenumber(inputtxt)  
  2. {  
  3.   var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;  
  4.   if(inputtxt.value.match(phoneno))  
  5.      {  
  6.        return true;        
  7.      }  
  8.    else  
  9.      {  
  10.        alert("Not a valid Phone Number");  
  11.        return false;  
  12.      }  
  13. }  
View the example in the browser
Flowchart :
Flowchart : JavaScript - phone validation North America

Validate an international phone number with country code

Now, let's see how to validate a phone number with country code, either in +24-0455-9034, +21.3789.4512 or +23 1256 4587 format.

HTML Code

view plaincopy to clipboardprint?
  1. <!DOCTYPE html><br><html lang="en"><br><head>  
  2. <meta charset="utf-8">  
  3. <title>JavaScript form validation - checking non-empty</title>  
  4. <link rel='stylesheet' href='form-style.css' type='text/css' />  
  5. </head>  
  6. <body onload='document.form1.text1.focus()'>  
  7. <div class="mail">  
  8. <h2>Input an Phone No.[+xx-xxxx-xxxx, +xx.xxxx.xxxx, +xx xxxx xxxx] and Submit</h2>  
  9. <form name="form1" action="#">   
  10. <ul>  
  11. <li><input type='text' name='text1'/></li>  
  12. <li>&nbsp;</li>  
  13. <li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>  
  14. <li>&nbsp;</li>  
  15. </ul>  
  16. </form>  
  17. </div>  
  18. <script src="phoneno-+international-format.js"></script>  
  19. </body>  
  20. </html>  

JavaScript Code

view plaincopy to clipboardprint?
  1. function phonenumber(inputtxt)  
  2. {  
  3.   var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;  
  4.   if(inputtxt.value.match(phoneno))  
  5.      {  
  6.        return true;  
  7.      }  
  8.    else  
  9.      {  
  10.        alert("Not a valid Phone Number");  
  11.        return false;  
  12.      }  
  13. }  
View the example in the browser
Flowchart :
Flowchart : JavaScript - phone validation international
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)