使用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表单验证仅在您尝试实际提交表单时执行，或者当您显式使用JavaScript验证它¹。

因为你的JavaScript绑定到一个不同的事件(按钮点击)，表单验证不会在那一点上执行。你可以这样解决:

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

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

---

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