khalonn khalonn - 7 months ago 23
Javascript Question

jQuery validation before AJAX submit

I have a simple signup form with the following jQuery validation code:

$(document).ready(function(){

$("#registerForm").validate({

rules: {

Username: {required: true, minlength: 6},
Password: {required: true, minlength: 6},
re_Password: {required: true, equalTo: "#Password"}

},

});
});


It validates correctly before I submit the form.

The problem comes when I want to also do an AJAX submit of the form, because the form no longer validates and submits without validation:

<form id="registerForm" action="register.php" method="post" onsubmit="xmlhttpPost('register.php', 'registerForm', 'signup-box'); return false;">


The default that works is:

<form method="post" id="registerForm" action="register.php">


Please, if anyone can point me in the right direction or give me some starting points to solve this I would be grateful.

Thanks.




Thanks to Kundan Singh Chouhan I have found the solution adding the following code to the document.ready block:

$("#registerForm").submit(function(){

if($("#registerForm").valid()){

xmlhttpPost('register.php', 'registerForm', 'signup-box');

}

return false;

});

Answer

I think you should have to remove the onsubmit event from your form tag and write the below script in document.ready()

$("form").submit(function(){
   if($("form").validate()){
      xmlhttpPost('register.php', 'registerForm', 'signup-box'); 
   }
   return false;
});

Hope this will fix your problem.

Comments