Jquery Form Validation and Submission
We have created a simple script to validate the form using jQuery. jQuery provides the client-side validation of the form. For the jQuery validation we used to add the two library files:
1. jquery-1.10.2.js
2. jquery.validate.js
Here are an example to display how to implement jQuery on the page, we have three fields which we have validated here:
1. fullname
2. email
3. mobile
We have also checked the "fullname" and "email" uniqness with using the "remote" method.
This validation is implemented on the "CodeIgniter" Framework here:
<script id="demo" type="text/javascript">
$(document).ready(function() {
// validate signup form on keyup and submit for company profile
var validator = $("#cadminForm").validate({
rules: {
fullname: {
required: true,
remote:"http://www.example.com/admin/checkName?type=create&id=&';?>",
},
email: {
required: true,
email: true,
remote:"http://www.example.com/admin/checkEmail?type=create&id=&';?>",
},
mobile: {
required: true,
number: true,
minlength: 10,
maxlength: 10
},
},
messages: {
fullname: {
required: "Please enter full name.",
remote: jQuery.validator.format("{0} is already in use")
},
email: {
required: "Please enter a valid email address",
remote: jQuery.validator.format("{0} is already in use")
},
mobile:{
required:"Please enter mobile number",
number: "Please enter numeric value only",
minlength: jQuery.validator.format("Please enter at least {0} digit number"),
maxlength: jQuery.validator.format("Please enter not more than {0} digit number"),
},
},
submitHandler: function() {
form.submit();
}
});
});
</script>
<form action="" method="post" name="cForm" id="cForm">
Full Name: <input type="text" name="fullname" id="fullname" />
Email:<input type="text" name="email" id="email" />
Mobile:<input type="text" name="mobile" id="mobile" />
<button type="submit">Save</button>
</form>
1. jquery-1.10.2.js
2. jquery.validate.js
Here are an example to display how to implement jQuery on the page, we have three fields which we have validated here:
1. fullname
2. email
3. mobile
We have also checked the "fullname" and "email" uniqness with using the "remote" method.
This validation is implemented on the "CodeIgniter" Framework here:
<script id="demo" type="text/javascript">
$(document).ready(function() {
// validate signup form on keyup and submit for company profile
var validator = $("#cadminForm").validate({
rules: {
fullname: {
required: true,
remote:"http://www.example.com/admin/checkName?type=create&id=&';?>",
},
email: {
required: true,
email: true,
remote:"http://www.example.com/admin/checkEmail?type=create&id=&';?>",
},
mobile: {
required: true,
number: true,
minlength: 10,
maxlength: 10
},
},
messages: {
fullname: {
required: "Please enter full name.",
remote: jQuery.validator.format("{0} is already in use")
},
email: {
required: "Please enter a valid email address",
remote: jQuery.validator.format("{0} is already in use")
},
mobile:{
required:"Please enter mobile number",
number: "Please enter numeric value only",
minlength: jQuery.validator.format("Please enter at least {0} digit number"),
maxlength: jQuery.validator.format("Please enter not more than {0} digit number"),
},
},
submitHandler: function() {
form.submit();
}
});
});
</script>
<form action="" method="post" name="cForm" id="cForm">
Full Name: <input type="text" name="fullname" id="fullname" />
Email:<input type="text" name="email" id="email" />
Mobile:<input type="text" name="mobile" id="mobile" />
<button type="submit">Save</button>
</form>
Comments
Post a Comment