html5表单验证，无效表单操作并在所有html5表单元素都被验证时执行jQuery？

Posted 2023-05-08

【中文标题】html5表单验证，无效表单操作并在所有html5表单元素都被验证时执行jQuery？

【英文标题】：html5 form validation, void form action and execute jQuery when all html5 form elements are validated?

【发布时间】：2011-08-06 23:37:10

【问题描述】：

我有一个简单的 html5 表单，我想利用它来验证必填字段。我的问题是我想使用 HTML5 表单验证但同时避免实际提交表单，因为我想执行一个 jQuery ajax 调用。我知道您可以禁用 html5 验证，但我想将此作为表单验证的主要方法，而不是 jQuery 插件。

有什么想法吗？

HTML

<form action="donothing" id="membershipform" method="get" accept-charset="utf-8">
    <input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required>
    <input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required>
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required>    
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required>      
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required>
    <p>
        <input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px">
    </p>
</form> 

JAVASCRIPT：

$(function()
  $("#submitbtn").click(function()
    $.ajax(
      url: "<?php bloginfo('template_url') ?>/ajax-membership.php",
      success: 
      function(txt)
        if(txt)
          $("#thankyou").slideDown("slow");
        
      
    );
  );
);

【参考方案1】：

据此：Do any browsers yet support HTML5's checkValidity() method?，这可能不是最新的事实，因为 HTML5 正在进行中，Form.checkValidity() 和 element.validity.valid 应该允许您从 javascript 访问验证信息。假设这是真的，您的 jQuery 需要将自己附加到表单提交并使用它：

$('#membershipform').submit(function(event)
    // cancels the form submission
    event.preventDefault();

    // do whatever you want here
);

【讨论】：

致所有读者：确保在函数中包含事件参数，否则这在 Firefox 中将不起作用。

@Max，你的意思是确保将event参数传递给回调函数吗？如果是这样，是的，这在所有浏览器中肯定是必需的，否则你不能调用preventDefault。

是的。只是作为一个提醒。我浪费了很多时间试图弄清楚为什么在使用 event.preventDefault(); 而不是示例的其余部分之后它不起作用。即使没有 event 参数，它在 Chrome 上的行为似乎仍然符合预期，但在 Firefox 上则不然。

@Max - 您可能拥有的是 Chrome 自动具有一些自动验证行为，这也会阻止提交表单。所以根本不需要这段代码，但是如果你在没有定义event 的情况下使用它，event.preventDefault() 会在控制台上抛出一个错误。因此，请确保保持该控制台打开。在外面保持安全！ :)

【参考方案2】：

您可以从 javascript 使用 html5 表单验证，仅调用方法 reportValidity()

在你的例子中：

<script>
    document.querySelector('#membershipform').reportValidity()
</script>

reportValidity 运行 html5 表单验证并返回 true/false。

【参考方案3】：

用途：

$('#membershipform').submit(function()
    // do whatever you want here

    return false;
);

【讨论】：

如果 return 语句上面的代码抛出错误，这将不起作用。如果出现错误，表单仍会转到“action”属性中指定的地址。

是的！如果我希望我的表单通过验证部分但不提交，则此方法有效。干得好

【参考方案4】：

这是对默认行为和 javascript 的巧妙利用来创建您想要的内容。

var form = document.getElementById("purchaseForm");
if(form.checkValidity())
    console.log("valid");
    e.preventDefault();
else
    console.log("not valid");
    return;

如果表单有效，则 preventDefault() 并继续执行您的功能（例如通过 ajax 发送）。 如果无效，则返回而不阻止默认，您应该会发现表单验证的默认操作发生在您的表单输入上。

【讨论】：

这对我有用。它帮助我检查所有输入字段是否有效。我没有使用e.preventDefault();，而是将存储表单的代码放在if 语句中。

【参考方案5】：

使用纯java脚本

<script>

    document.getElementById('membershipform')
        .addEventListener("submit", 
            function(event) 
                event.preventDefault();

                // write stuff

            );

</script>