1

我正在使用内置的 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;
    });

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

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

请帮我解决这个问题。提前致谢 ：）

4

1 回答 1

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试试这个

于 2013-03-09T22:46:01.137 回答