用于停止 WordPress 注册表单提交的 Javascript（电子邮件验证）

Posted 2023-03-15

【中文标题】用于停止 WordPress 注册表单提交的 Javascript（电子邮件验证）

【英文标题】：Javascript to stop WordPress registration form submission (email validation)

【发布时间】：2022-01-06 17:58:03

【问题描述】：

我已成功地将 mailrefine.io API 与我的 WordPress 注册表单集成以进行电子邮件验证。现在，当用户填写表单并单击提交时，会弹出一条消息，并根据 API 连接的电子邮件验证结果显示“电子邮件有效”或“电子邮件无效”。

问题是，只要消息出现在电子邮件输入字段下方，表单就会提交并将用户重定向到另一个页面，而不管验证结果如何。

我已经编写了下面的 javascript 来代替首先检查电子邮件验证结果，如果无效则停止提交，以便用户输入有效的电子邮件地址。

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


</script>

上面的脚本不起作用，我在调试代码时唯一能发现的是我可能需要用其他东西替换第 1 行中的 onclick 事件？

感谢您的帮助。

如果有帮助，下面是我的表单的 html 代码。

<form name="registerform" id="mailrefine-form" action="https://alliedhealthprograms.com/login/?action=register" method="post" novalidate="novalidate">
        <p>
            <label for="user_login">Username</label>
            <input type="text" name="user_login" id="user_login" class="input" value="" size="20" autocapitalize="off">
        </p>
        <p>
            <label for="user_email">Email</label>
            <input type="email" name="user_email" id="mailrefine-email" class="input" value="" size="25">
        </p>
        <input type="hidden" id="ct_checkjs_register_form_061412e4a03c02f9902576ec55ebbe77" name="ct_checkjs_register_form" value="1068643702"><script type="text/javascript">setTimeout(function()var ct_input_name = "ct_checkjs_register_form_061412e4a03c02f9902576ec55ebbe77";if (document.getElementById(ct_input_name) !== null) var ct_input_value = document.getElementById(ct_input_name).value;document.getElementById(ct_input_name).value = document.getElementById(ct_input_name).value.replace(ct_input_value, '1068643702');, 1000);</script>      <p class="loginpress-reg-pass-wrap">
    <label for="loginpress-reg-pass">Password</label>
    <input autocomplete="off" name="loginpress-reg-pass" id="loginpress-reg-pass" class="input" size="20" value="" type="password">
  </p>
  <p class="loginpress-reg-pass-2-wrap">
    <label for="loginpress-reg-pass-2">Confirm Password</label>
    <input autocomplete="off" name="loginpress-reg-pass-2" id="loginpress-reg-pass-2" class="input" size="20" value="" type="password">
  </p>
            <p id="reg_passmail">
            Registration confirmation will be emailed to you.           </p>
        <br class="clear">
        <input type="hidden" name="redirect_to" value="">
        <p class="submit">
            <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Register">
        </p>
    </form>

【参考方案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;
   ;

工作示例：https://jsfiddle.net/b4t69od1/1/

【讨论】：

嗨@pallavdubey 谢谢你的回复。正如你所建议的，我尝试用 return false 替换 window.stop();在我的代码中，但这不起作用。如果我向您提供注册页面 URL 以便您自己调查，会有所帮助吗？

当然@kt3486，我可以试试。还将您的表单 HTML sn-p 添加到问题中。这将有助于更好地理解问题。

谢谢你，@pallavdubey 正如你所建议的那样，我已经通过在我的问题底部添加表单的 html 代码 sn-p 来更新我的问题。另外，请随时调查和测试表格，这是我的注册页面的链接：alliedhealthprograms.com/login/?action=register

我刚刚用你的 html 试了一下。如果您在 onclick 事件中return false，它将停止提交表单。可能是您的新 JS 没有在浏览器中更新。尝试清除缓存或硬刷新(ctrl + shift + R)，然后重试。这是一个工作示例：jsfiddle.net/b4t69od1/1。刚刚也在您的注册页面上尝试过。它不会重定向。

谢谢。我查看了页面源代码，我添加的代码正在显示。此外，此页面已从我的缓存中排除。我尝试了一次硬刷新，但也没有解决问题。