如何在js中标记为需要的输入标签上触发验证？ [复制]答案

【问题标题】：How to trigger validation on input tag marked as required in js? [duplicate]如何在js中标记为需要的输入标签上触发验证？ [复制]
【发布时间】：2018-11-02 11:05:57
【问题描述】：

当用户模糊此输入字段时，我想检查其有效性并弹出默认浏览器“气泡”。我希望不要将输入包装在表单标签中。如何使用js来达到这个效果？

现在我正在尝试这段代码，但没有结果：

<input type="text" onblur="this.checkValidity();" required>

结果应该是（但没有包装在表单标签中：

<form action="/action_page.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

【问题讨论】：

您有什么理由特别想在控件失去焦点时检查有效性，而不是作为对change 或input 事件的响应？跨度>
你可以用 js 做任何事情。我的意思是，收集所有输入数据并使用 js 提交表单。只是一个想法......
本机浏览器支持仅适用于使用表单包装的输入，因为在语义方面强制采用良好做法。
我也可以在onchange 上进行此检查，但我想让浏览器“气泡”弹出，喜欢请填写此字段.....
当你说“泡沫”时，你是指原生的alert(); 那种泡沫吗？

标签： javascript html

【解决方案1】：

请看下面的例子：

var allElem = document.querySelectorAll('input, textarea');

for( var i = 0; i < allElem.length; i++ ) {
  allElem[ i ].addEventListener( 'blur', function(){
    if( !this.checkValidity() )
      document.getElementById( 'submit' ).click()  
    else
      this.classList.remove('has-error')
  }); 
}

<form id="myForm" action="/action_page.php" method="POST">
    Username: <input type="text" required>
    <input type="submit" value="Submit" id="submit">
</form>

【讨论】：