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

时间:2015-01-22 03:15:25

标签: jquery forms jquery-validate

我使用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。

控制台中没有错误或警告,而且在将required类应用于非隐藏字段时,validate()会按预期运行。

那么为什么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" }
        }                      
    });

1 个答案:

答案 0 :(得分:3)

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

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

类似的东西:

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