0

jQuery- uidatepickerをJörnZaeffererのvalidateプラグインと一緒に使用しています。

日付ピッカーが入力フィールドの内容を変更した後、 validateが自動的に起動しないことはよく知られています。

私が興味を持っているのは、年のドロップダウンがクリックされたとき、月のドロップダウンがクリックされたとき、そして日がクリックされたときに、 validateが起動することです。また、これらのいずれの場合も、入力フィールドの値は変更されていません。ここで自分で試すことができます：http：//jsfiddle.net/ECku3/12/検証メソッドが呼び出されたときと、呼び出されたときの検証済みフィールドの値を示すconsole.logイベントがあります$.validator.showErrors()。

tl; dr

日付ピッカーに焦点が当てられている間、検証を防ぐ方法を見つけたいと思います。しかし、ユーザーが日付ピッカーを使用する代わりに日付を入力するときの検証を妨げたくありません。だから私はただ設定することはできません$.validator.settings.onfocusout = false。

アイデア？

4

1 に答える 1

1

私は次のようにjquery.ui.datepicker.validation.jsプラグインを使用しました：

$(document).ready(function() {
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        showOn: 'button',
        changeMonth: true,
        changeYear: true,

    });

    $("#mydate").datepicker();
    $('#myform').validate({ 
        errorPlacement: $.datepicker.errorPlacement, 
        rules: { 
            mydate: { 
                required: true, 
                dpDate: function(){traceBack(); return true;},
                dpCompareDate: 'notBefore 2011-01-01' 
            } 
        }, 
        messages: { 
            mydate: 'Please enter a valid date (yyyy-mm-dd) after 2011-01-01'
        }});

    function traceBack() {
        console.log("Firing?");
    }
});​

編集

日付ピッカーウィジェット内を移動しているときに検証イベントを発生させたくない場合は、日付ピッカーウィジェットが表示されているときにonfocusout設定をオフに切り替えることができます。

$(document).ready(function() {
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        showOn: 'button',
        changeMonth: true,
        changeYear: true,
        beforeShow: function () {$("#myform").validate().settings.onfocusout = false; },
        onClose: function () {$("#myform").validate().settings.onfocusout = true;}
    });

    $("#mydate").datepicker();
    $('#myform').validate({ 
        errorPlacement: $.datepicker.errorPlacement, 
        rules: { 
            mydate: { 
                required: true, 
                dpDate: function(){traceBack(); return true;},
                dpCompareDate: 'notBefore 2011-01-01' 
            } 
        }, 
        messages: { 
            mydate: 'Please enter a valid date (yyyy-mm-dd) after 2011-01-01'
        }});

    function traceBack() {
        console.log("Firing?");
    }

});​

このフィドルを参照してください：http：//jsfiddle.net/mccannf/Bn7gy/24/

于 2012-11-02T16:41:27.010 に答える