0

フォームを検証するために検証プラグインでjQuery を使用しています。また、jQuery-ui のオートコンプリートを使用して、フィールドの 1 つに許容される値のリストを提供しています。2 つのフィールドで、オートコンプリート リストの内容を制御しますprov_type。はラジオボタンで、 datepickerが添付されたテキスト入力です。prov_dateprov_typeprov_date

目標

  1. 失敗したルールのメッセージをhasantecedent通常のルールとは別の場所に表示する
  2. hasantecedent2 つのフィールドに適用される場合でも、失敗メッセージを 1 回だけ表示する

問題

2 つ目の目標を達成する「hasant」としてprov_typeandprov_dateを追加しました。$.validator.groups問題は、それらが実際にはhasantecedentルールのグループにすぎないことです。それらに適用される他のルール (たとえば、日付の検証 on prov_date) は、要素がグループ化されていないかのように実際に機能する必要があります。これはおそらく inまたは in のいずれかで対処できると思いますが、方法がわかりません。errorPlacementshowError

アイデア？

コード

検証のデフォルト

$.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を追加し、ルール#hasantにトグルvisを追加することです。hasantecedentこのような：

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 に答える