How to prevent form submission in case of valiadtion error with standard form submission?

Question

I am developing a form that includes some text fields and some fields for uploading files. Some javascript codes build the form dynamically by adding it to the div element (id = wrapper). It’s not possible to send / upload files to my knowlegde via ajax, so I choose the "classic way" to submit the form, see the code below. However, I want text fields to be checked using jquery validation; verification code works fine, but how to prevent form submission in case of verification error ?. I assume that I need to somehow override the standard form submission handler, but I don’t know how to do it ...

//original form submit code $("#formNewAgreements").submit(function(){ var form = $("#formNewAgreements"); form.validate(); if(form.valid()){ //only submit via ajax if javascript validation has been performed successfully $.ajax({ type: "POST", url: "suppladmin_agreementsetup_submit_x1.php", data: $("#formNewAgreements").serialize(), dataType: "json", success: function(msg){ if(msg.statusgeneral == 'success'){ $("#wrapper").children().remove(); //remove current New Agreements form SetupAgreements(); } else { $("#errorbox").html(msg.statusgeneral); }//else }, //succes: function error: function(){ $("#errorbox").html("There was an error submitting the form. Please try again."); } });//.ajax //make sure the form doesn't post return false; } //if(form.valid() });//$("#myForm").submit() //validation code for validing the textfields var completeform = $("#formNewAgreements"); completeform.validate(); //html code form <form id="formNewAgreements" name="formNewAgreements" action="submit_x1.php" method="post" enctype="multipart/form-data" target="hidden-form" > <!--<form id="formNewAgreements" name="formNewAgreements" action="" method="post" autocomplete="on">--> <a href="#" id="add-form">Add agreement</a> <div id="wrapper"></div> <!--anchor point for adding set of form fields --> <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" /> <input type="submit" name="submitForm" value="Confirm"> </form> <iframe style="display:inline" name="hidden-form" width="200" height="20"></iframe> 

Answer 1

Quote OP:

"I want text fields to be checked using jquery validation"

Since you are using the jQuery Validate plugin, just implement submitHandler for your ajax . According to the documentation , this is "the right place to submit the form via Ajax after checking it."

Despite the answers of others,

• You do not need embedded JavaScript.

• You do not need any additional event handlers.

 var completeform = $("#formNewAgreements"); completeform.validate({ submitHandler: function(form) { // your ajax here return false; // block default form action } }); 

DEMO: http://jsfiddle.net/U4P3F/

Answer 2

try it

 <input type="submit" name="submitForm" value="Confirm" onclick='completeform.validate();' /> 

In this case, your validate method should return true or false depending on whether the form is valid or not.

EDIT: As @ lex82 said, the right way to do this is to add a handler to create the submit. Change the form tag as follows:

 <form id="formNewAgreements" name="formNewAgreements" action="submit_x1.php" method="post" enctype="multipart/form-data" target="hidden-form" onsubmit='completeform.validate();'>