Question

作为基于网络的编程的新手，我无法理解为什么下面的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绑定到不同的事件（按钮单击），因此此时不执行表单验证。您可以通过以下方式解决此问题：

将您的提交绑定到表单的submit事件，而非按钮单击或
在脚本的最开始使用form validation API。

我强烈推荐第一个选项。当通过其他方法提交表单时，它更具语义感并且工作正常（我不记得当有人在文本字段中按Enter键时是否会模拟按钮单击，并且如果JavaScript调用{肯定不会触发它{1}}以编程方式......）。

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

使用websockets激活HTML5 Pattern属性

1 个答案: