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

问题

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>

回答1:

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
    }
});

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

回答2:

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();'>

来源：https://stackoverflow.com/questions/20248936/how-to-prevent-form-submission-in-case-of-valiadtion-error-with-standard-form-su

标签

javascript

jquery

jquery-validate