javascript 当所有HTML表单元素都通过验证时，如何使表单操作无效并执行jQuery？

moiiocjp 于 2023-02-07 发布在 Java

关注(0)|答案(5)|浏览(147)

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

- 超文本标记语言**

<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>

- 脚本语言：**

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

JavaScript

来源：https://stackoverflow.com/questions/5688122/how-can-i-void-a-form-action-and-execute-jquery-when-all-html-form-elements-are

5条答案

按热度按时间

vd8tlhqk1#

根据这个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
});

赞(0）回复(0）举报 2023-02-07

k4ymrczo2#

您可以从javascript使用html5表单验证，仅调用方法reportValidity（）
在您的示例中：

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

reportValidity运行html5表单验证并返回真/假。

赞(0）回复(0）举报 2023-02-07

vltsax253#

用途：

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

    return false;
});

赞(0）回复(0）举报 2023-02-07

ulydmbyx4#

这是默认行为和javascript的一个微妙的杠杆作用来创建你想要的东西。

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

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

赞(0）回复(0）举报 2023-02-07

aiqt4smr5#

使用纯Java脚本

<script>

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

                // write stuff

            });

</script>

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 当所有HTML表单元素都通过验证时，如何使表单操作无效并执行jQuery？

5条答案

相关问题

热门标签

最新问答