How To Validate HTML5 Forms Using Jquery

Validation is a process to check whether the user is filling right information or wrong in form by using this method we can stop user filling wrong or empty information in form.This process can be done using jquery and javascripting in this example we have shown how to validate empty field,how to validate email address and how to validate password strength.You can also use html required attribute to validate your form.

OUTPUT:

how to validate form using jquery and javascripting

CODE:

                                
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<!-- Styles -->
<style>
h1
{
color:#e52b50;
font-size:20px;
margin-left: 50px;
margin-top:100px;
}
#contact label{
display: inline-block;
width: 100px;
text-align: right;
}

#contact {

margin-top: 40px;
margin-left: 20px;

}
button {

color:white;
width:200px;
height:25px;
background-color:#e52b50;
margin-top: 0px;
margin-left: 110px;

}
input
{
margin-bottom:30px;
width:220px;
height:30px;
font-weight:bold;
}
span
{
color:#e52b50;
}
label 
{
color:#e52b50;
}
</style>

<body>
<title>Form Validation</title>
<h1>
FORM VALIDATION USING JQUERY</h1>
<form id="contact" method="post" action="">
<!-- Name Field -->
<div>
<label for="contact_name">Name:</label>
<input type="text" id="contact_name" name="name" placeholder="Your Name"/>

<span id="nameerror"></span>
</div>
<!-- Email -->
<div>
<label for="contact_email">Email:</label>
<input type="email" id="contact_email" name="email" placeholder="Your email"/>
<span id="emailerror"></span>
</div>
<div>
<label for="contact_password">Password</label>
<input type="password" id="contact_password" placeholder="Your Password"/>
 
<span id="passworderror"></span>
</div>
<br>
<br>


</form>
<div id="contact_submit">
    
<button >SUBMIT</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#contact_submit").click(function() {

var input=$("#contact_name").val();
if(input)
{
$("#nameerror").text("");

}
else
{
$("#nameerror").text("Name field should not be left empty"); 
}


var check=$("#contact_email").val();
var pos = check.search("@");
var pos1 = check.search(".com");
if((pos!=-1) && (pos1!=-1))
{
$("#emailerror").text("");
}
else
{
$("#emailerror").text("Please Enter Valid Email"); 
}
var check=$("#contact_password").val();
var num = check.length;
if(num<=5)
{
$("#passworderror").text("Your Password Should Be Greater Than 5 Letters");
}
else 
{
$("#passworderror").text("");
}


});
});
</script>
</body>
</html>

Projavatricks

Wednesday 25 November 2015

How To Validate HTML5 Forms Using Jquery

OUTPUT:

CODE:

Live Demo

0 comments:

Post a Comment

Search Tutorials

Tutorial Topics

FOLLOW US ON FACEBOOK

Popular Tutorials