HTML5 setCustomValidation устраняет проблемы

Question

Я использую встроенные методы проверки HTML5 для проверки даты рождения в форме.

Форма имеет три элемента списка выбора: user_dob_date user_dob_month user_dob_year

Все эти три элемента были отмечены как "обязательные" для проверки, так как пользователь должен выбрать допустимую опцию

Теперь, после того как пользователь выберет все три опции и проверка HTML5 для выбора по крайней мере, опция проходит нормально, я хочу проверить дату високосного года, а также убедиться, что пользователь не выбрал что-то вроде 31-го февраля 1998 года!!!

$('#form-signup-next').submit(function(){                       
   if($('#user_dob_month').val()=='2' && $('#user_dob_date').val()>29 ){
        var obj=$('#user_dob_date')[0];
        alert($('#user_dob_month').val());
        obj.setCustomValidity('Invalid Date!');         
   }else{
        var obj=$('#user_dob_date')[0];
        obj.setCustomValidity('');
    }
    return false;
    });

-> Пользовательское сообщение не отображается при нажатии кнопки "Отправить". Это происходит, если кнопка нажата дважды. Первый щелчок мышью Matbe устанавливает MSG, но не отображается, второй щелчок отображает ошибку

-> Если после неправильного выбора и отображения пользовательских сообщений, если дата зафиксирована и мы пытаемся отправить форму, она все равно выдает ошибку:(

Пожалуйста, помогите мне в этом. Заранее спасибо:)

Answer 1

Вы не должны делать это при отправке формы, потому что как только setCustomValidity значение установлено, это не позволит отправить форму до тех пор, пока значение ошибки проверки не станет понятным, и в вашем коде проблема заключается в том, что вы очищаете значение ошибки при отправке. Вот почему вы получаете ошибку проверки, даже если вы исправили значение при следующем запуске.

Для получения более подробной информации, пожалуйста, проверьте эту ссылку ТЕКУЩИЕ ВОПРОСЫ И РЕШЕНИЯ РЕАЛИЗАЦИИ (особенно проблема 3)

Хорошо, теперь вы можете сделать это следующим образом... проверяя и устанавливая сообщение об ошибке в выпадающем списке изменения значения

$('#user_dob_date,#user_dob_month').on('change',function(){
    if($('#user_dob_month').val()=='2' && $('#user_dob_date').val()>29){
    $('#user_dob_date')[0].setCustomValidity('Invalid Date!');
    }
    else{
    $('#user_dob_date')[0].setCustomValidity('');
    }
  });

Я проверил это, и он работает нормально.

Так что теперь, когда пользователь выберет неправильную комбинацию и нажмет кнопку отправки, появится сообщение об ошибке.

Попробуйте это на http://jsbin.com/aqicim/1