How to validate form with JQuery
jquery form validation examples,plugins,download,submit,Validate HTML form use JQuery
For validate form use jquery, you have to download jquery validation plugins or give full path of jquery validation plugins file like folowing example.
Insert this JavaScript in the head section of your html code.
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#valForm").validate({
rules:{
firstName:{
required:true
},
email:{
required:true,
email:true
},
password:{
required:true,
},
confirmPassword:{
required:true,
equalTo: "#password",
},
},
messages:{
firstName:{
required:" First Name cant be empty"
},
email:{
required:" Please enter valid Email Address"
},
password:{
required:" Please enter Password"
},
confirmPassword:{
required:" Please confirm password",
equalTo:" Confirm password did not match"
},
},
});
});
</script>
<script src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#valForm").validate({
rules:{
firstName:{
required:true
},
email:{
required:true,
email:true
},
password:{
required:true,
},
confirmPassword:{
required:true,
equalTo: "#password",
},
},
messages:{
firstName:{
required:" First Name cant be empty"
},
email:{
required:" Please enter valid Email Address"
},
password:{
required:" Please enter Password"
},
confirmPassword:{
required:" Please confirm password",
equalTo:" Confirm password did not match"
},
},
});
});
</script>
<table border="0" cellpadding="2" cellspacing="1">
<tr>
<td>First Name</td>
<td><input name="firstName" id="firstName" type="text"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" id="email" type="text"></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" id="password" type="password"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input name="confirmPassword" id="confirmPassword" type="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
<tr>
<td>First Name</td>
<td><input name="firstName" id="firstName" type="text"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" id="email" type="text"></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" id="password" type="password"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input name="confirmPassword" id="confirmPassword" type="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
Note: If you want customize error message style you can add this style in head section of your HTML file
<style type="text/css">
label.error {
font-size:.8em;
color: red;
padding-left: .5em;
vertical-align:top;
}
</style>
label.error {
font-size:.8em;
color: red;
padding-left: .5em;
vertical-align:top;
}
</style>
