javascript - 如何使用 jQuery 代码解决此 setCustomValidity 解除绑定(bind)问题

Question

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

该表单具有三个选择列表元素:

• user_dob_date
• user_dob_month
• user_dob_year

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

用户填写完所有三个选项后，用于选择至少一个选项的 HTML 验证会顺利进行。但我想检查闰年的日期，并确保用户没有选择 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;
    });

有几个问题

• 单击提交时不会显示自定义消息。如果单击该按钮两次，则会执行此操作。第一次单击它可能设置了消息但不显示，第二次单击显示错误

• 如果在错误选择和显示自定义消息后，如果日期固定并且我们尝试提交表单，它仍然会抛出错误。

Answer 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