HTML 5模式不适用于按钮的onclick事件

debugcn 发表于 Dev

香卡

在页面中，为了获取字段值，我没有使用form标记，而是使用了Anchor标记的click事件来获取值，并使用AJAX调用将其传递给服务器。

后来尝试了HTML 5模式验证，但没有成功；经过这么多尝试后，添加了表单标签，然后将“锚定”修改为“按钮”，然后就可以了。

老的

<div id="div1">
     <input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
      <a id="add" onclick="addMessage();">Add</a>
</div>

新的

 <form id="addMessage">
     <div id="div1">
         <input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" />
          <button id="add">Add</button>
     </div>
 </form>

使用form标记和表单提交是触发模式验证的唯一方法，还是有任何解决方法？

溜冰场助理6

在HTML5Rocks上的HTML5中有一个很好的约束验证概述。

您可以通过checkValidity()在JavaScript中调用DOM元素上的方法来手动验证字段：

document.getElementById('add').addEventListener('click', function() {
  if (document.getElementById('message').checkValidity()) {
    window.alert('valid station name');
    // addMessage();
  } else {
    window.alert('invalid station name!');
  }
});

<div id="div1">
  <label>
    Station
    <input type="text" id="message" pattern="[a-zA-Z]{3}" required title="Enter valid Station" maxlength="3">
  </label>
  <a id="add" role="button">Add</a>
</div>

并供参考： HTMLInputElement

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。