HTML5 setCustomValidation 解除绑定问题答案

【问题标题】：HTML5 setCustomValidation unbind issuesHTML5 setCustomValidation 解除绑定问题
【发布时间】：2013-03-10 06:47:33
【问题描述】：

我正在使用内置的 HTML5 验证方法来验证表单中的出生日期。

表单具有三个选择列表元素， user_dob_date user_dob_month user_dob_year

所有这三个元素都被设置为“必需”进行验证，因为用户必须选择一个有效的选项

现在，在用户选择所有三个选项并且选择至少一个选项的 HTML5 验证顺利通过之后，我想检查闰年的日期，并确保用户没有选择像 1998 年 2 月 31 日这样的东西！！！

$('#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;
    });

-> 点击提交时不显示自定义消息。如果按钮被单击两次，它会这样做。第一次点击可以设置msg但不显示，第二次点击显示错误

-> 如果自定义msg选择和显示错误后，如果日期是固定的，我们尝试提交表单，它仍然会抛出错误:(

请帮我解决这个问题。在此先感谢:)

【问题讨论】：

标签： javascript jquery html validation html5-validation

【解决方案1】：

您不应该在提交表单时这样做，因为一旦设置了 setCustomValidity 值，它将不允许提交表单，除非验证错误值明确并且在您的代码中问题是您正在清除提交时的错误值。因此，即使您在下次运行时更正了值，也会收到验证错误。

详情请查看此链接CURRENT IMPLEMENTATION ISSUES AND LIMITATIONS(specially Problem 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试试这个

【讨论】：