Javascript 停止 WordPress 注冊表單提交（電子郵件驗證）

Question

我已經成功地將 mailrefine.io API 與我的 WordPress Z0C83F57C786A0B7EBZ4A9 驗證注冊表單集成。 現在，當用戶填寫表單並單擊提交時，會彈出一條消息並顯示“電子郵件有效”或“電子郵件無效”，具體取決於來自 API 連接的 email 驗證結果。

問題是，只要消息出現在 email 輸入字段下方，無論驗證結果如何，表單都會提交並將用戶重定向到另一個頁面。

我已經寫了下面的 javascript 來代替首先檢查 email 驗證結果，如果無效則停止提交，以便用戶輸入有效的 email 地址。

 <script> document.getElementById('wp-submit').onclick = function(){ if(document.getElementById('mailrefine-msg').innerHTML == 'Email is invalid'){ window.stop(); } } </script>

上面的腳本不起作用，我在調試代碼時唯一能找到的是我可能需要用其他東西替換第 1 行中的 onclick 事件？

謝謝您的幫助。

Answer 1

您必須在 onclick 事件結束時return false 。 這將停止表單提交。

<form id="myForm">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" />
      <button id="btn" type="submit">Submit</button>
</form>

window.onload = function () {
  const myForm = document.forms.myForm;
  const btn = document.getElementById("btn");
  btn.onclick = function () {
    const email = document.forms.value;

    // validate email
    
    // return false to stop submission
    return false;
  };
};

選項2 ：您可以使用表單提交事件

window.onload = function () {
  const myForm = document.forms.myForm;
     myForm.onsubmit = function () {
       const email = myForm.email.value;
       // validate the email
       // return false to stop form submission
       return false;
   };