Phone Number Validation Using jQuery
Phone Number Validation: simple Phone no verification, it shows result when a user types their phone no in the input box. There are three types of Phone Number verification:
- Blank field cannot enter,
- Minimum enter 6 character and maximum 12 characters.
- Text cannot enter in the phone input field.
In this tutorial, I will create a jQuery validation use jQuery on keyup and on blur function. When a user changes their values that time it will display the result of users instant feedback. You need to create a simple form page and create a text field that likes input type=” text”. Without click submit button you can check your validation.
Follow the example codes, that will help you to know more and you can apply these codes in your web pages for easy work.
Full Code Here:
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery Validation</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6"> <h2 align="center" >Validation Form</h2> <form class="form-horizontal" action="" onsubmit="return validateform();"> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Phone:</label> <div class="col-sm-10"> <input type="test" class="form-control" id="phone" placeholder="Enter Phone No" name="phone"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </div> </div> </div> <script> $("#phone").on("keyup blur", function() { var phone=$('#phone').val(); var ph_filter = /^[0-9-+]+$/; if(phone==""){ $('#phone').css('color','red'); $('#phone').focus(); return false; } if(!ph_filter.test(phone)){ $('#phone').css('color','red'); $('#phone').focus(); return false; } if(phone.length < 10 || phone.length> 12){ $('#phone').css('color','red'); $('#phone').focus(); return false; }else{ $('#phone').css('color','green'); return true; } }); </script> </body> </html>
If you want to check the example code so, you can copy the example code, there have full example code. You can create a demo project in your local server and print all codes and get the results.
If you study in jquery and you are fresher in jquery so, never mind you can do it, Because there have full code of the example in the above text. The jQuery is the easy way to done any work to varying fast in your web page.
You know that jquery is the platform of JavaScript library and it designs HTML page to easily the client side scripting. The simple and easy to use jquery for validation any field in your project or any form in your web page.
In this tutorial I will display a simple jQuery verification with a bootstrap form and user gets result very fast with color affection. If you want, you can use many different colors and display any message to call tag id, which position you want to display the message.
I have more validation tutorial for you so please visit our site all time and follow me and our websites. You can comment me for more work purpose.