javascript - 使用 websockets 激活 HTML5 模式属性

Question

作为基于 Web 编程的新手，我无法理解为什么下面的 pattern 属性字段由于我的 javascript 而无法检查文本字段的有效性。

<form id="aForm">
    <input type="text" pattern="^[ a-zA-Z0-9,#.-]+$" id="address" title="Standard address"/>        
<input type="submit" id="open" value="Start"/>
</form>

然后将表单内容发送到 javascript 文件，然后通过 websocket 将其发送到服务器，如下面的代码片段所示。然而，它忽略了通过 pattern 属性验证表单。

 $(document).ready(function() {

    $("#open").click(function(evt) {          
          evt.preventDefault();
          var form = $('#aForm').serialize();
          webSocket = new WebSocket("ws://localhost:9999/mh");
          webSocket.onopen = function()
          {
             webSocket.send(form);
          };
          REST OF CODE....

似乎出于某种原因，这会阻止在发送文本之前检查文本。我想知道为什么以及如何确保表单通过 pattern 属性进行验证。

谢谢

Answer 1

HTML5 表单验证仅在您尝试实际 submit the form 时执行，或者当您显式使用 JavaScript 对其进行验证时¹。

由于您的 JavaScript 绑定(bind)到不同的事件(按钮单击)，因此不会在此时执行表单验证。您可以通过以下方式解决此问题:

1. 将您的提交绑定(bind)到表单的 submit 事件而不是按钮点击，或者
2. 使用form validation API在脚本的开头。

我强烈推荐第一个选项。当通过其他方法提交表单时，它具有更多的语义意义并且可以正常工作(我不记得当有人在文本字段中按 Enter 时是否会模拟按钮单击，如果 JavaScript 调用 $('#aForm').submit() 编程...).

---

¹ 至少，这些是我唯一注意到的地方 - 验证完成后可能还有其他事件/情况。