按验证规则分组，而不是按类分组

Question

我正在使用带有validate插件的jQuery来验证表单。我也使用jQuery-ui的autocomplete来提供其中一个字段的可接受值列表。两个字段prov_type和prov_date控制自动完成列表的内容。 prov_type是一个单选按钮，prov_date是附加了datepicker的文字输入。

目标

1. 在与正常规则不同的地方显示失败的hasantecedent规则中的邮件
2. 仅显示hasantecedent失败消息一次，即使它适用于2个字段

问题

我已将prov_type和prov_date添加到$.validator.groups作为“hasant”，以实现第二个目标。问题在于它们实际上只是hasantecedent规则的一个组。应用于它们的任何其他规则（例如，prov_date上的日期验证）应该真正表现为元素未被分组。我认为这可能可以在errorPlacement或showError中解决，但我无法弄清楚如何。

想法？

代码

验证默认

$.validator.setDefaults({
    debug: true,
    ignore: ":hidden", // do not validate form fields in invisible sections
    focusCleanup: true,
    errorPlacement: function(error, element) {

        //something here to determine for placement of group rules?

        if ( element.is(":radio") ) {
            error.appendTo( element.parent().next().next() );
        }else if(element.is(":checkbox") && element.parent().is('li')){
            error.insertBefore(element.closest("ul.horiz"));
        }else{
            error.appendTo(element.parent());
        };
    },
    success:'checked',// set this class to error-labels to indicate valid fields
    validClass:'checked'//set this to same so valid class will be removed from fields that become errors
});

hasancecedent rule

$.validator.addMethod("hasantecedent", function( value, element ) {
    set_possible_antecedents();
    var type=$('input[name="prov_type"]:checked').val();

    var r = $('#prov_date').data(type).length;
    if(r){
        $('.antecedent',$('#'+ type)).removeAttr('disabled');
    } else {
        $('.antecedent',$('#'+ type)).attr('disabled','disabled');
    }

    return r;
}, 'No fish are available for the current provenance date.');

表单验证

$("form[name='provenance']").validate({
    onkeyup: function(element, event){ //no keyup validation for fields with UI widgets
        if(jQuery.inArray( element.name,['prov_date','dam', 'sire','reuse'])>-1) return;
         $.validator.defaults.onkeyup.call(this, element, event);
    },
    groups:{hasant: 'prov_type prov_date'},
    rules: {
        prov_type: {hasantecedent: {depends: function(e){ return jQuery.inArray( $('input[name="prov_type"]:checked').val(),['cross','reuse']) > -1;}}},
        prov_date: {
            dateCan:true,
            hasantecedent: {
                depends: function(e){return jQuery.inArray( $('input[name="prov_type"]:checked').val(),['cross','reuse']) > -1;}
            }
        },
        fish_id: { required: true, pkey: true},
        dam_id: {
            required: function(e) {return $('input[name="prov_type"]:checked').val()=='cross';},
            pkey: true
        },
        sire_id: {
            required: function(e) {return $('input[name="prov_type"]:checked').val()=='cross';},
            pkey: true
        },
        dam: {
            required: function(e) {return $('input[name="prov_type"]:checked').val()=='cross';},
            isantecedent: {
                depends: function(e){return $('input[name="prov_type"]:checked').val()=='cross';}
            }
        },
        sire:{
            required: function(e) {return $('input[name="prov_type"]:checked').val()=='cross';},
            isantecedent: {
                depends: function(e){return $('input[name="prov_type"]:checked').val()=='cross';}
            },
        },
        dam_count: {
            digits: function(e) {return $('input[name="prov_type"]:checked').val()=='cross';},
            min:0
        },
        sire_count: {
            digits: function(e) {return $('input[name="prov_type"]:checked').val()=='cross';},
            min:0
        },
        supplier_id:{
            required: function(e) {return $('input[name="prov_type"]:checked').val()=='delivery';},
            pkey: true
        },
        removal_id:{
            required: function(e) {return $('input[name="prov_type"]:checked').val()=='reuse';},
            pkey: true
        },
        removal: {
            required: function(e) {return $('input[name="prov_type"]:checked').val()=='reuse';},
            isantecedent: {
                depends: function(e){return $('input[name="prov_type"]:checked').val()=='reuse';}
            }
        },
    }
});

Answer 1

我最不得不做的就是移除hasant群组，在消息可以添加的地方添加一个静态#hasant div，然后在hasantecedent规则中添加一个toggle vis。像这样：

的javascript

$.validator.addMethod("hasantecedent", function( value, element ) {
    set_possible_antecedents();
    var type=$('input[name="prov_type"]:checked').val();
    var r = $('#prov_date').data(type).length;
    if(r){
        $('input.antecedent').removeAttr('disabled').removeClass('warning');
        $( "#hasant" ).hide();
    } else {
        $('input.antecedent').attr('disabled','disabled').addClass('warning');
                $( "#hasant" ).show();
    }
    return r;
},  ' ');

的CSS

#hasant {
    display:none;
    color:#C7252B;
    border: 2px solid #C7252B;
    position: absolute;
    top:100%;
    left:65%;
    width: 15em;
    padding: 1em;
}

的HTML

<div id='hasant'>No fish are available for the current provenance date.</div>