Question

我在一个页面上有两个表单，每个表单都有一个开始和结束<form></form>标记。我用JQuery Validate Plugin验证它。我必须用一个按钮验证两个表单。问题是两个表单的验证都需要为每个表单单独一个按钮，这是不需要的。代码如下： -

$(document).ready(function(){
 $('.formValidate').each(function() {   // <- selects every <form> on page
        $(this).validate({

    rules: {
         orderno: { //placed at first form
            required: true,
            minlength: 5
        },customername: { //placed at second form
            required: true,
            minlength: 5
        }
    },
    //For custom messages
    messages: {

        order:{
            required: "Enter a Order No",
            minlength: "Enter at least 5 characters"
        },customername:{
            required: "Enter a username",
            minlength: "Enter at least 5 characters"
        }

    },
    errorElement : 'div',
    errorPlacement: function(error, element) {
      var placement = $(element).data('error');
      if (placement) {
        $(placement).append(error)
      } else {
        error.insertAfter(element);
      }
    },
    submitHandler: function() { 
        console.log("Order submitted!"); 
    }


 });
 });


}); //end readyfunction

HTML如下： -

<form class="formValidate" id="tstordform" method="get" action="">
    <div class="row">
         <div class="input-field col s12">
             <i class="mdi-image-tag-faces prefix"></i>
             <input  id="orderno" name="orderno" type="text" data-error=".errorTxt1">
             <label for="orderno">Order No.*</label>
             <div class="errorTxt1"></div>
          </div>
     </div>
</form>

<form class="formValidate" id="cstdataform" method="get" action="">
    <div class="row">
        <div class="input-field col s12">
            <i class="mdi-action-account-circle prefix"></i>
            <input id="customername" name="customername" type="text" data-error=".errorTxt6">
            <label for="customername">Customer Name</label>
            <div class="errorTxt6"></div>
        </div>

        <div class="input-field col s3">
            <button id="validateboth" class="btn waves-effect waves-light center cyan submit" type="submit" name="action">Save Order
                <i class="mdi-content-send right"></i>
            </button>
        </div>
    </div>
</form>

请帮帮我！

Answer 1

问题是两个表单的验证都需要为每个表单单独一个按钮，这是不需要的。

不确定您的意思，因此显示您想要的HTML标记会很有帮助。

我必须用一个按钮验证两个表单。

从两个表单中删除所有按钮，并在其中放置一个按钮。

然后编写一个同时提交两个表单的处理程序。这将触发两者的验证......

$('#submitboth').on('click', function(e) {
    e.preventDefault();
    $('[id^="myform"]').submit();
});

DEMO 1：jsfiddle.net/293ps7k9/

这样做的缺点是，如果/没有错误，将提交一个或两个表格。

或者，您可以在每个表单上保留提交按钮，然后创建第三个按钮和处理程序，以触发两者的验证测试。

$('#validateboth').on('click', function(e) {
    e.preventDefault();
    $('[id^="myform"]').each(function() {
        $(this).valid();  // <- validation test only
    });
});

DEMO 2：jsfiddle.net/tupn779c/

修改：

我必须首先验证两个表单，然后通过ajax通过单个函数调用提交两个表单的数据。

Your single comment比OP中的所有内容都更好地解释了它。虽然，在功能上，这与将所有内容放在单个form容器中完全没有区别。

解决方案实际上与上述两个相同：

捕获click容器中外的单个submit按钮的form事件。（否则，您可以使用type="button"并将放在任何所需的位置。）

通过.valid()方法遍历两个表单以查找错误。

然后当两个表单都通过验证时，为两个表单触发.submit()。这将依次触发Ajax所在的每个表单上的submitHandler函数。（Ajax 必须进入submitHandler每个.validate()实例的$('#validateboth').on('click', function(e) { e.preventDefault(); var forms = $('[id^="myform"]'); forms.each(function() { $(this).valid(); }); if ($('#myform1').valid() && $('#myform2').valid()) { forms.submit(); } });回调内容

请参阅下面的最终演示。

{{1}}

最终DEMO ：jsfiddle.net/qtcs7uwe/

使用jquery validate插件通过一个提交按钮验证两个表单

1 个答案: