使用websockets激活HTML5 Pattern屬性

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() ，它肯定不會被觸發$('#aForm').submit()編程方式...）。

---

¹至少，這些是我注意到的唯一地方 - 在完成驗證時可能還有其他事件/情況。