0

我正在使用带有验证插件的 jQuery 来验证表单。我还使用 jQuery-ui 的自动完成功能为其中一个字段提供可接受值的列表。两个字段，prov_type并prov_date控制自动完成列表的内容。prov_type是一个单选按钮，是一个附加了日期选择器prov_date的文本输入。

目标

  1. 在与正常规则不同的位置显示来自失败hasantecedent规则的消息
  2. 仅显示hasantecedent一次失败消息，即使它适用于 2 个字段

问题

我已将prov_typeand添加prov_date为$.validator.groups实现第二个目标的“hasant”。问题是他们实际上只是hasantecedent规则的一个群体。适用于它们的任何其他规则（例如，在 上的日期验证prov_date）实际上应该表现得好像元素没有被分组一样。我认为这可能可以在 inerrorPlacement或 in 中解决，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
});

有先例规则

$.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';}
            }
        },
    }
});
4

1 回答 1

0

我最终要做的是删除组，在消息可以去的地方hasant添加一个静态div，并在规则中添加一个切换 vis。像这样：#hasanthasantecedent

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>
于 2012-11-06T16:00:30.520 回答