2

<input name="begin_time" />,<input name="end_time" />jquery.datepicker と jquery-ui-timepicker-addon.js を使用して日時を取得するような入力があります。

$('input[name=begin_time]').datetimepicker({
        minDate : 0,
        stepMinute : 5,
        beforeShow : function (input, inst) {},
        onClose : function (dateText, inst) {
            var endDateTextBox = $('input[name=end_time]');
            var beginDateTextBox = $('input[name=begin_time]');
            var testStartDate = new Date(dateText);
            if (endDateTextBox.val() != '') {
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate)
                    endDateTextBox.val(dateText);
            } else {
                endDateTextBox.val(dateText);
            }
        },
        onSelect : function (selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('input[name=end_time]').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });
    $('input[name=end_time]').datetimepicker({
        onClose : function (dateText, inst) {
            var startDateTextBox = $('input[name=begin_time]');
            if (startDateTextBox.val() != '') {
                var testStartDate = new Date(startDateTextBox.val());
                var testEndDate = new Date(dateText);
                if (testStartDate > testEndDate)
                    startDateTextBox.val(dateText);
            } else {
                startDateTextBox.val(dateText);
            }
        },
        stepMinute : 5,
        onSelect : function (selectedDateTime) {
            var end = $(this).datetimepicker('getDate');
            $('input[name=begin_time]').datetimepicker('option', 'maxDate', new Date(end.getTime()));
        }
    });

また、jquery.validate.js を使用して入力を検証し、フォームを送信する前にそれが必要であることを確認します。

$('#form').validate({
    rules : {
        begin_time : 'required',
                end_time : 'required'
    },
    messages : {
        begin_time : 'The  start time can\' be empty',
                end_time : 'The event end time can\' be empty'
    }
})

ユーザーが何も入力しない場合、私が送信すると、メッセージが表示されます（そうです）。

しかし、日時を取得しても、エラーのヒントは消えません。消えてほしい。

誰でもこれについて提案してもらえますか?

4

3 に答える 3

2

これは私のために働いた：

$("#dateFieldID").change(function () {
    $('#formID').validate({
        required: true,
        date: true
    }).element('#dateFieldID');
});

各日付ピッカー入力フィールドに変更イベントを追加してから、検証するとフィールドが削除されました。これを Firefox 17、IE 7+、Safari 6、および Chrome v.23 でテストしました。JQuery UI の DatePicker onClose イベントにフックし、onClose イベントが送出されたときにフォーカスを日付フィールドに戻すことを開発者が提案している他の投稿を見たことがあります。これは機能しましたが、IE では DatePicker ダイアログが非表示になりませんでした。また、エラー メッセージは、日付フィールドがフォーカスを失った後にのみ消えました。これは、他のフィールドとの一貫性がありませんでした。これは私にとってはうまくいきました。

これが誰かに役立つことを願っています。これはうまく機能しているようです-少なくとも私にとっては;）

于 2012-12-13T01:56:21.590 に答える
1

を使用してfocusCleanup、エラー クラスとメッセージを取り除くことができます。

$(".selector").validate({
   focusCleanup: true
})
于 2012-04-12T09:57:42.063 に答える