如何避免标准表单提交出现错误时提交表单? [英] how to prevent form submission in case of valiadtion error with standard form submission?

问题描述

我正在开发一种表单，其中包含一些文本字段和一些用于文件上传的字段.一些JavaScript代码通过将表单添加到div元素(id = wrapper)中来动态构建表单.据我所知，无法通过ajax发送/上传文件，因此我选择了经典方式"来发布表单，请参见下面的代码.但是，我想通过jquery validate来验证文本字段.验证代码可以正常工作，但是如果发生验证错误，如何防止表单提交?我认为我需要某种方式来覆盖标准表单提交处理程序，但是不知道该怎么做...

//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>

解决方案

引用OP:

我想通过jquery validate验证文本字段"

由于您使用的是jQuery Validate插件，因此只需为ajax实现submitHandler回调即可. 根据文档，这是在验证后通过Ajax提交表单的正确位置" .

尽管别人的回答，

• 您不需要嵌入式JavaScript.

• 您不需要任何其他事件处理程序.

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

演示: http://jsfiddle.net/U4P3F/

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

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

这篇关于如何避免标准表单提交出现错误时提交表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！