在运行时将 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 validate 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);