I am developing a form that which includes some textfields and some fields for file uploads. Some javascript code builds the form dynammically by adding it to to a div element (id=wrapper). To my knowlegde one cannot send/upload files via ajax, so I choose the 'classic way' to post the form, see code below. However, I want to have the textfields validated by means of jquery validate; the validation code works fine, but how to prevent the form submission in case of a validation error?. I assume I need somehow to override the standard form submission handler, but dont know how to do that...
//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>
Quote OP:
"I want to have the textfields validated by means of jquery validate"
Since you're using the jQuery Validate plugin, simply implement the submitHandler
callback for your ajax
. As per documentation , this is "the right place to submit a form via Ajax after it is validated" .
Despite others' answers,
You do not need inline 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
}
});
Try this
<input type="submit" name="submitForm" value="Confirm" onclick='completeform.validate();' />
In this case your validate method should return true or false depending on if form is valid or not.
EDIT: As @lex82 mentioned the proper way to do this is to add handler to form submit. Change you form tag to:
<form id="formNewAgreements" name="formNewAgreements" action="submit_x1.php" method="post" enctype="multipart/form-data" target="hidden-form" onsubmit='completeform.validate();'>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.