Javascript 如果标准表格提交存在有效性错误，如何防止表格提交？

我正在开发一个表单，其中包括一些文本字段和一些文件上传字段。一些javascript代码通过将表单添加到div元素id=wrapper来动态构建表单。据我所知，无法通过ajax发送/上传文件，因此我选择“经典方式”发布表单，请参见下面的代码。但是，我希望通过jqueryvalidate验证textfields；验证代码可以正常工作，但是在出现验证错误时如何防止表单提交？。我假设我需要以某种方式覆盖标准表单提交处理程序，但不知道如何做到这一点

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

试试这个

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

在这种情况下，validate方法应该返回true或false，这取决于表单是否有效

编辑： 正如@lex82所提到的，正确的方法是将处理程序添加到表单提交中。 将表单标记更改为：

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

报价OP:

我想通过jquery验证文本字段

由于您使用的是jQuery验证插件，只需为ajax实现submitHandler回调即可，这是验证表单后通过Ajax提交表单的正确位置

不管别人怎么回答,

您不需要内联JavaScript

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

---

演示：

您可以通过AJAX上传文件。验证代码在哪里？显示浏览器中呈现的表单HTML。。。标记中的php代码对JavaScript毫无用处。@putvd：据我所知，您只能通过带有html5的ajax上传文件-请参阅。使用我原来的jquery submitfunction（我刚刚在这个网站上添加了这个函数），我的netbeans调试器显示了一个空的$_FILES变量。如果不单击submit按钮（例如，在输入字段中按ENTER键），您将错过提交表单的所有情况。使用onsubmit查看我的答案..验证是插件的初始化。。。不是测试方法，因此该方法不会返回true或false。因此，将其放在提交处理程序中是没有意义的。更不用说内联JavaScript在使用jQuery.thnx时是毫无意义的。据我所知，您只能通过带有html5的ajax上传文件-参见。使用我最初的jquery submitfunction（我刚刚在这个网站上添加的），我的netbeans调试器显示了一个空的$_FILES变量。如果我对ajax文件上载仍然有错误，那么我的submit函数肯定有问题？@user2543182，您编辑的代码比以前更糟糕。将.validate放在提交处理程序中不是正确的方法。。。它是由内而外的。简单地研究一下我的基本示例，它展示了一旦正确初始化，验证是如何自动进行的，submitHandler回调如何正确地处理表单提交的拦截。thnx，我明白你的意思。但是，我仍然很难用一种简单的方式以ajax/jquery的形式上传文件（结合一些文本字段）。正如我之前看到的几页评论一样——也是这一页——说你不能那样做，而不是你所说的…@user2543182，直到我能把它整理出来，我删除了我答案的这一部分。然而，同样的原则也适用于。。。当表单有效并准备提交时，要激发的任何代码都会进入submitHandler回调函数中。

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