HTML5 'required'和jQuery验证器的问题

Question

我正在开发一个poc，其中我对几个文本字段使用required属性，对另一个字段使用jQuery验证器（不是强制性字段，但添加了自定义验证）。下面是同样的小提琴。

POChttps://jsfiddle.net/rkLpovda/1/

我期待的是…

1. 当什么都没有提供时，当我点击提交按钮时，它应该前两个文本字段显示错误-O/p:按预期工作。无问题

2. 向最后一个文本字段提供输入时（自定义验证）用户点击提交按钮，如果验证失败，我预计所有三个文本字段都会抛出一个错误-O/P：不幸的是，只有最后一个被触发。

为什么required在弹出自定义验证时未能抛出错误？请分享你的想法。

更新：我刚刚注意到，一旦最后一个文本字段出现错误，如果我再次单击提交按钮，那么我可以看到所有文本字段的错误。

Answer 1

$(function() {
  $.validator.addMethod("validatePossibleYear", function(value, element) {
      var currYear = new Date().getFullYear();
     $("#fName").blur(); $("#lName").blur();
      return !( value != "" && !(value == currYear || value == currYear - 1));   
      },
    "Invalid Year. It should be either current year or previous year"
  );
});
  $('#validateTest').validate({
    rules: {
      pYear: {
      required:true,
        validatePossibleYear : true
      }
    },
     submitHandler: function(form) 
             {
                form.submit();
             }
  });