[解決済み] jQueryのバリデータとdatepickerのクリックが検証されない

質問

テキスト入力を検証するためにjquery validatorを使っています。問題は、送信をクリックすると、すべてのエラーメッセージが正しく表示されることです。しかし、datepickerの入力では、エラーメッセージを消去するために、datepickerを2回選択する必要があります。2回目のクリックでエラーメッセージが消えます。

どこかで、datepickerに'on'イベントを使用することについて読んだので、それを試してみましたが、違いはありませんでした。正しくコード化されていないようです。私は、invalidとsuccessクラスがバリデータスクリプトの一部であると仮定しています。試してみる価値はあります。

ここで何が起こっている可能性があるのか。ありがとうございます。

サイチャート・コード

<script type="text/javascript">
$(function() {
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '2011:2037',
            dateFormat: 'dd/mm/yy',
            minDate: 0,
            defaultDate: null
        }).on('changeDate', function(ev) {
    if($('#datepicker').valid()){
       $('#datepicker').removeClass('invalid').addClass('success');   
    }
 });

    });
</script>

htmlコード

<label for"datepicker">
   <input id="datepicker" name="datepicker" type="text" />
</label>

バリデータ関連コード

ルール/メッセージセクション

 datepicker:
    {
        required: true,
        date: true
    },

 datepicker:
    {
        required: " * required: You must enter a destruction date",
        date: "Can contain digits only"
    }

解決方法は？

OPを引用します。

1回のクリックで選択され、正しくデータが入力されます。2回目のクリックでエラーメッセージが消えます。

それは、通常、バリデーションが発生するのは keyup と blur イベントを使用します。 キーボードではなく、日付ピッカーでフィールドを操作しているため、通常のトリガーイベントを妨害しているのです。

あなたのコードは補正するはずなのに、オーバーキルになっています...。

$(function() {
        $("#datepicker").datepicker({ ... })
.on('changeDate', function(ev) {
    if($('#datepicker').valid()){
       $('#datepicker').removeClass('invalid').addClass('success');   
    }
 });
    });

を呼び出すだけです。 .valid() メソッドを呼び出します。

$(function() {
    $("#datepicker").datepicker({ ... })
        .on('changeDate', function(ev) {
            $(this).valid();  // triggers the validation test
            // '$(this)' refers to '$("#datepicker")'
        });
});

しかし、これでは基本的に以前と同じです。

とは何ですか？ changeDate はどうなっているのでしょうか？ これはdatepickerのプラグインで定義されているものですか？ これは標準的なjQueryのイベントではないので、おそらくすべての問題です。 標準の change イベントの代わりに....

$(function() {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '2011:2037',
        dateFormat: 'dd/mm/yy',
        minDate: 0,
        defaultDate: null
    }).on('change', function() {
        $(this).valid();  // triggers the validation test
        // '$(this)' refers to '$("#datepicker")'
    });
});