如何为更改事件的特定输入显示本机验证错误？

Question

我有一个经典的 HTML5 表单。当用户更改特定输入值时，我想使用 jquery/javscript 显示浏览器本机错误工具提示。我想避免用户尝试提交表单以查看所有错误。

为此，我尝试了 checkValidity() 和 reportValidity() 函数，但只有在我的情况下添加 alert('test'); 时它才有效......太奇怪了

JS 脚本

myInputJqueryObject.on('change', function() {
   if ( !this.checkValidity() ) {
       this.setCustomValidity( 'Custom error !!!' );
       var $form = $('#my-form');
       if( $form[0].checkValidity() === false) {
           $form[0].reportValidity();
           //alert('test'); <-- works only if I active this line code
           return true;
       }
   }
});

Answer 1

当您知道输入无效时，您无需检查表单有效性。您可以省略if( $form[0].checkValidity() === false)。您也可以在输入本身上reportValidity。
而setCustomValidity 需要一些时间才能应用于输入字段。所以你必须将reportValidity 包装成setTimeout：

$('input').on('change', function() {
  var self = this;
  if (!self.checkValidity()) {
    self.setCustomValidity('Custom error !!!');
    setTimeout(function() {
      self.reportValidity();
      self.setCustomValidity('');
    }, 1);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form"><input value="del me" required></form>

Answer 2

根据“Kosh Very”的回答，我找到了解决方案。听起来不错，没有错误。

JS 脚本：

 $('input').on('focusout', function() {
   var self = this;
   var validity = self.checkValidity();
   if( !validity ){
      if( self.validity.patternMismatch ){ //<-- Optionnal : Condition to keep others native message errors except Pattern. 
          self.setCustomValidity( 'Custom Error about pattern!!!' );
      }
      setTimeout(function() {
            self.reportValidity();
            self.setCustomValidity( '' ); //<-- Important to reinit
      }, 1);
   }
 });