1

作为基于 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 文件，然后通过 a 将其发送到服务器，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属性验证。

谢谢

4

1 回答 1

4

HTML5 表单验证仅在您尝试实际提交表单时执行，或者当您明确使用 JavaScript 对其进行验证时1。

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

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

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

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

于 2012-12-29T17:15:21.900 回答