Jquery Ajax Form Validation and Submission

A form is a most general and important requirements of all websites. Several kinds of forms are used on websites like registration form, contact form , subscription form, survey form, price calculator form etc. To get this requirements done more easily/flexibly, to give the visitors most optimized performance experience without refreshing the page you can use Jquery and its plugins. To get this full process done successfully, you will need to have two plugin:

* First one is Jquery form validation plugin. This will help you to validate the form fields to their suitable form of data. You will get many complex validation like email validation, phone number validation etc already integrated in it, so you won't have to think much.

* Second one is Jquery form submission plugin. This will help you to submit the form in ajax mode, without worrying anything about the form fields.

Here is a short code snippet to use these both two:

var validator;
$(document).ready(function(){
validator = $("#contactForm").validate({ rules:{
captcha:{remote: "captcha/captcha.php"}
},
messages:{
captcha: "Invalid captcha"
},
submitHandler: function(form){
$(form).ajaxSubmit({success:ShowResponse}); $("#loading").css('visibility','visible'); return false; } });});

function ShowResponse(data){
alert(data);
validator.resetForm();
}

Here you will see that, you can even validate captcha in ajax mode preventing automated robot submission. To set custom error message, you will have to use the name of the form fields. to make a field required, just simply put the class name 'required' in the input field. It will validate that automatically.

And, yes, sure, You don't need to bind yourself only these 2 plugin, if you find a better one,simply go ahead with that.