Today, We will explain to you how to make form validation in jquery(Jquery Form Validation Example). when the user submitted the form at that time required for input field validation. there are two types of validation, the first is server-side, and the second is client-side. see below example of jquery form validation (client-side).
Required field, email validation and number required .. etc I will give validation information by our post.
See below the code of jquery validation.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
<script type="text/javascript">
<!-- jQuery Form Validation code -->
$(function() {
$("#frmAdd").validate({
rules: {
txtFname: {
required: true,
lettersonly: true
},
txtLname:{
required:true
},
txtEmail: {
required: true,
email: true
},
txtMobile:{
required: true,
number :true,
minlength:10,
maxlength:10
}
},
// Specify the validation error messages
messages:
{
txtFname: {
required: "this field required"
},
txtLname:{
required:'this field required'
},
txtEmail: {
required: 'this field required'
},
txtMobile:{
required: 'this field required'
}
}
});
});
</script>
</head>
<body>
<form method="post" name="frmAdd" id="frmAdd">
<table align="center">
<tr>
<td colspan="2" align="center">Add Record</td>
</tr>
<tr>
<td>First Name</td>
<td>
<input type="text" name="txtFname" value="">
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" name="txtLname">
</td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="txtAddress" rows="4" cols="16"></textarea> </td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="txtEmail">
</td>
</tr>
<tr>
<td>Mobile</td>
<td>
<input type="text" name="txtMobile">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Add" name="btnadd">
</td>
</tr>
</table>
</form>
</body>
</html>
Please follow and like us:
It is perfect time to make some plans for the future and it is time to be
happy. I’ve read this post and if I could I want to suggest you some interesting things or suggestions.
Perhaps you could write next articles referring
to this article. I want to read more things about
it!
Howdy! I could have sworn I’ve been to this site before
but after reading through some of the post I realized it’s new to me.
Anyways, I’m definitely happy I found it and I’ll be bookmarking and checking back often!