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

根据'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);
   }
 });

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: