Validation of a Phone Number is required when we validate an HTML form.In this tutorial we will see how to validate a phone number using jQuery. Now a day phone number became a mandatory field in registration form and we must validate it before submit. Firstly we check for non empty and for 10 digit numeric value. On validation failed, we append specific error message to main div so that user can get what is wrong while submitting the form.

We have used span having class name error to display form error in it using jQuery append() method. jQuery.css() method is used to display error colour which set style properties for used span element. Let us see how Phone Number Validation is done using jQuery.

HTML

Phone Number Validation Using jQuery

jQuery

CSS

.container-fun
{
margin: 100px auto;
text-align: center;
width:483px;
height:150px;
}
h1
{
margin: 50px auto;
text-align: center;
color: green;
font-size: 24px;
}
.btn
{
background-color: #2d6586;
color: #fff;
padding: 7px 12px 12px 19px;
display: inline-block;
font-family: 'Montserrat';
font-size: 18px;
letter-spacing: 2px;
cursor: pointer;
font-weight: bold;
border: none;
}
.input
{
width: 286px;
padding: 10px 13px 11px 21px;
display: inline-block;
font-family: 'Montserrat';
font-size: 12px;
letter-spacing: 2px;
cursor: pointer;
}
#phone_submit
{
margin: 50px auto;
text-align: center;
}

So with above given script you can understand how to implement phone Number Validation using jQuery. If you have any query regarding this article feel free to comment.

The post Phone Number Validation Using jQuery appeared first on PHPCluster.