JQuery validator и datepicker click not validating

Я использую jquery validator для проверки ввода текста. У меня есть проблема: если я нажму кнопку "Отправить", он отобразит все сообщения об ошибках правильно. Однако на входе datepicker, чтобы очистить сообщение об ошибке, я должен дважды выбрать дату. то есть; 1 нажмите, чтобы выбрать, и он правильно вводит данные. 2-й клик, чтобы удалить сообщение об ошибке.

Я где-то читал об использовании события 'on' на datepicker, поэтому я попробовал это, но это не имело значения. Я не думаю, что это правильно закодировано. Я предполагаю, что недействительные и успешные классы являются частью валидатора script. Стоит попробовать.

Что может быть здесь? Благодаря

Sciprt code

<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 code

<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"
    }

Ответ 1

Цитата 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")'
    });
});

Ответ 2

Sparky ответ работал отлично для меня, единственное, что я бы изменил, вместо использования id, я просто использовал jquery this в функции on, то есть:

    .on('change', function() {
        $(this).valid();  
    });

Это просто делает его немного более общим. -D

Ответ 3

Если вы используете JQuery Form Validator (http://www.formvalidator.net/) и вы хотите использовать bootstarp datepicker, а затем просто добавьте class= "hasDatepicker" для ввода элемента. Он работал у меня.

<input type="text" name='birth_date' class="form-control hasDatepicker" id="datepicker" value=""  data-validation="birthdate" data-validation-format="mm/dd/yyyy">