jquery - 在运行时将submitHandler添加到jQuery validate()

Question

我正在使用jQuery mt-select管理从数千种可能性列表中自动完成的选择。

表单使用如下文本输入进行初始化

<input type="text" class="form-control" id="location[]" data-mt-filter-control="" autocomplete="on" style="width: auto;">

然后，随着选​​择的添加，隐藏的输入会被附加，例如

<input type="hidden" name="locationID[1]" value="1786" data-tag-id="1786">

我希望这些表单在 validate() 在主 JavaScript 文件中初始化后添加一个 jQuery 验证 SubmitHandler。这将检查以确保至少已做出一项所需的选择。

当选择存在(或不存在)时，我已验证 $("input[name^='locationID']").length 给出了预期值。然而，无论它们是否存在，表单都会返回有效，这让我相信没有添加submitHandler。

控制台中没有错误或警告，并且 validate() 的行为与预期一致，其中类 required 应用于非隐藏字段。

那么为什么submitHandler没有触发？

在带有此表单的页面上，我有:

<script type="text/javascript">
$(document).ready(function(){   
    $( "form" ).validate({
      submitHandler: function(form) {
            if($("input[name^='locationID']").length > 0) {
                 //Form is valid
                 alert('form data valid');
                 form.submit();
            }
            else {
                 //Form is invalid
                 alert('form data invalid');
            }
        },
      errorPlacement: function(error, element){
            if(element.attr("name") == "locationID[]"){
                error.appendTo($('#errorbox'));
                console.log('saw error');
            }else{
                error.appendTo( element.parent().next() );
                console.log('other errors');
            }
        }
    });
});
</script>

在所有页面的主 JS 文件中，我像这样初始化 validate():

$("form").validate({
        ignore: [], // include hidden fields
        errorPlacement: function(error, element) { 
            if ( element.is(":radio") ) {
                error.appendTo ( '#' + element.attr('name') + '_multiError' ); // eg rad_22_multiError
            } else if ( element.is(":checkbox") ) {
               error.appendTo ( '#' + element.attr('name').replace(/[\[\]]+/g,'') + '_multiError' );
            } else {
                error.appendTo( element.parent() );
            }
        },
        rules: {
            antispam: { equalToParam: "events" }
        }                      
    });

Answer 1

两个初始化实例不会组合彼此的选项，第二个实例将覆盖第一个实例。

您可以做的是将选项分解为存储的对象变量，并根据表单类(如果该类存在)扩展它们。

类似于:

var validateOpts = {
    ignore: [],
    errorPlacement: function (error, element) {...},
    rules: {...}
}

var extraOpts ={
    submitHandler:function(){...} 
    errorPlacement: function(error, element){...}
}

var $form =$('form');
 /* see if we need to combine the options or not */
if($form.is('.specialFormClass') ){
   /* yup...needs extending */
   $.extend( validateOpts, extraOpts);
}
/* now init the validation */
$form.validate(validateOpts);