使用 websocket 激活 HTML5 模式属性答案

【问题标题】：Activation of the HTML5 Pattern Attribute with websockets使用 websocket 激活 HTML5 模式属性
【发布时间】：2012-12-29 16:30:43
【问题描述】：

作为一个基于 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 属性进行验证。

谢谢

【问题讨论】：

为了更好的措施，请重写您的输入字段以在相邻属性之间插入空格（例如将id="address"title="Standard address"更改为id="address" title="Standard address"）
@EliranMalka;进行了更改。当我把它复制过来时，它一定已经被压缩了。
绑定javascript发送到$('#aForm').submit()而不是$('#open').click()。
@DCoder：感谢您解决了问题并按预期工作。感谢您对我所有问题的帮助。如果您想回答这个问题，那么我可以投票并接受您的回答。

标签： javascript jquery html websocket

【解决方案1】：

HTML5 表单验证仅在您尝试实际 submit the form 或当您明确使用 JavaScript 验证时执行¹。

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

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

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

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

【讨论】：