How to Validate and submit form using jQuery:

Forms in HTML are summited using jQuery and validation is done through jQuery libraries as validation library. Forms validation, form posting through jQuery functions Here is some code that is being used to validate form fields and submit data to server after validation. If any of fields has error, empty or any other issue then a span is embedded to field with proper text that either field is required or some thing matching error

In above code snippet we have a validation function is from jQuery validation library, This function validates all fields that either they r filled or selected or not. Also if field is to validate then we use number option as true and there are some more options and messages. These are called as rules. We have onfocusout: function(element) {

$(element).valid(); }, this code means that all validation is applied on focus of pointer as well.

password:{ required: true, minlength: 3, maxlength: 25 },

This means that password field is required and minimum length must be 3 and maximum 25 characters. there are lot of options that can be used for that form

submitHandler: function(form) {
var formData = new FormData(jQuery(‘#admin-form’)[0]);
$.ajax({
url: “http://”+location.hostname+”/ness/admin/modules/super_admin/admin/src/ajax-add-admin.php”,
type: ‘POST’,
data: formData,
async: false,
cache: true,
contentType: false,
processData: false,
success: function (returndata)
{
response = jQuery.parseJSON(returndata);
}

In this code snippet submitHandler is function that gets form data and submit that data using ajax. This data is not mandatory that we are using ajax.Data can be submitted using form.submit function as well.

jQuery(‘#admin-form’).validate({
onfocusout: function(element)
{
$(element).valid();
},

rules: {
test: {
required: true,
},
first_name:{
required: true,
minlength: 3,
maxlength: 25
},
last_name:{
required: true,
minlength: 3,
maxlength: 25
},
/*            user_role:{
required: true,

},*/
password:{
required: true,
minlength: 3,
maxlength: 25
},
re_password:{
required: true,
minlength: 3,
maxlength: 25,
equalTo: “#password”
},
email_address:{
required: true,
email: true,
remote: “http://”+location.hostname+”/ness/admin/modules/ajax/src/ajax-gernal.php?data=email_address”
},
re_email_address:{
required: true,
email: true,
equalTo: “#email_address”
},
user_status:{
required: true
},
company:{
required: true
}

},
messages: {
re_password: {
equalTo: “Please enter the same password as above”
},
re_email_address: {
equalTo: “Please enter the same email as above”
},
email_address:{
remote: “Email is already exists”
}
},
submitHandler: function(form) {
var formData = new FormData(jQuery(‘#admin-form’)[0]);
$.ajax({
url: “http://”+location.hostname+”/ness/admin/modules/super_admin/admin/src/ajax-add-admin.php”,
type: ‘POST’,
data:  formData,
async: false,
cache: true,
contentType: false,
processData: false,
success: function (returndata) {
response = jQuery.parseJSON(returndata);

if (response[0] == ‘add’){
$(‘#first_name’).val(”);
$(‘#last_name’).val(”);
$(‘#user_name’).val(”);
$(‘#password’).val(”);
$(‘#re_password’).val(”);
$(‘#email_address’).val(”);
$(‘#re_email_address’).val(”);
$(“#success_message”).html(‘<span style=”color: #dd4b39;”>Admin Added Successfully !</span>’);
window.location.href =”http://”+location.hostname+”/ness/admin/modules/super_admin/admin/view/add-admin.phtml?id=”+response[1];
}else if (response[0] == ‘update’){
$(“#success_message”).html(‘<span style=”color: #dd4b39;”>Data Updated Successfully !</span>’);
window.location.href =”http://”+location.hostname+”/ness/admin/modules/super_admin/admin/view/add-admin.phtml?id=”+response[1];
}
}
});

}

});

In above code snippet we have a validation function is from jQuery validation library, This function validates all fields that either they r filled or selected or not. Also if field is to validate then we use number option as true and there are some more options and messages. These are called as rules. We have

 onfocusout: function(element) 
{ $(element).valid(); }, 

this code means that all validation is applied on focus of pointer as well.
password:{ required: true, minlength: 3, maxlength: 25 }, 
This means that password field is required and minimum length must be 3 and maximum 25 characters. there are lot of options that can be used for that form

submitHandler: function(form) {
submitHandler: function(form) {
var formData = new FormData(jQuery(‘#admin-form’)[0]);
$.ajax({
url: “http://”+location.hostname+”/ness/admin/modules/super_admin/admin/src/ajax-add-admin.php”,
type: ‘POST’,
data:  formData,
async: false,
cache: true,
contentType: false,
processData: false,
success: function (returndata) {
response = jQuery.parseJSON(returndata);

if (response[0] == ‘add’){
In this code snippet submitHandler is function that gets form data and submit that data using ajax.This data is not mandatory that we are using ajax.Data can be submitted using form.submit function as well.

Leave a Reply

Your email address will not be published. Required fields are marked *