ajax提交之前的HTML5验证答案

【问题标题】：HTML5 validation before ajax submitajax提交之前的HTML5验证
【发布时间】：2013-03-20 18:13:32
【问题描述】：

这应该很简单，但它让我发疯。我有一个使用 ajax 提交的 html5 表单。如果您输入了无效值，则会有一个弹出响应告诉您。在运行 ajax 提交之前，如何检查条目是否有效？

表格：

<form id="contactForm" onsubmit="return false;">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" required placeholder="Name" />
  <label for="subject">Subject:</label>
  <input type="text" name="subject" id="subject" required placeholder="Subject" />
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" required placeholder="email@example.com" />
  <label for="message">Message:</label>
  <textarea name="message" id="message" required></textarea>
  <input type="submit" id="submit"/>
</form>

提交：

$('#submit').click(function(){
    var name = $("input#name").val();
    var subject = $("input#subject").val();
    var email = $("input#email").val();
    var message = $("input#message").val();

    var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; 

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: dataString,
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

【问题讨论】：

标签： jquery ajax html forms validation

【解决方案1】：

我更喜欢使用 jQuery 提交处理程序，您仍然可以通过以下方法获得对表单的响应。

jQuery('#contactForm').on('submit', function (e) {
    if (document.getElementById("contactForm").checkValidity()) {
        e.preventDefault();
        jQuery.ajax({
            url: '/some/url',
            method: 'POST',
            data: jQuery('#contactForm').serialize(),
            success: function (response) {
                //do stuff with response
            }
        })
    }
    return true;
});

【讨论】：

【解决方案2】：

如果你绑定到提交事件而不是点击它只会在它通过 HTML5 验证时触发。

如果您多次使用它，最好将 jQuery 选择器缓存在变量中，这样您就不必在每次访问元素时都导航 DOM。 jQuery 还提供了一个 .serialize() 函数来处理表单数据的解析。

var $contactForm = $('#contactForm');

$contactForm.on('submit', function(ev){
    ev.preventDefault();

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: $contactForm.serialize(),
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});

【讨论】：

这应该是公认的答案，因为 HTML5 验证是在提交事件之前触发的。基本上，监听提交事件，然后阻止默认操作应该可以完成这项工作。无需调用 checkValidity() 方法，如已接受的答案所示，因为如果 HTML5 验证未通过，则不会触发提交事件。
不管你怎么说，它会在没有任何验证的情况下被解雇。我的部分代码： $('#begininstall').on('click',function(){ $('#formbegininstall').submit(); }); $('#formbegininstall').on('submit',function(ev){ ev.preventDefault(); var serializado = $('#formbegininstall').serialize(); $.ajax({
我无法编辑我之前的答案。我的问题是我使用链接提交 ajax。我所要做的就是用提交按钮替换链接。

【解决方案3】：

默认情况下，jQuery 对 HTML5 验证一无所知，因此您必须执行以下操作：

$('#submit').click(function(){
    if($("form")[0].checkValidity()) {
        //your form execution code
    }else console.log("invalid form");
});

【讨论】：

return false on submit 事件，正如 OP 所做的那样，是我正在寻找的......
Returning false（防止默认操作）...查看 csbarnes 的更准确的答案。
这可行，但我看到的小问题是它没有显示具有所需属性的元素的弹出窗口。

【解决方案4】：

你也可以使用jquery validate方法来验证表单

$("#form id").validate();

根据表单验证返回布尔值，您还可以使用 errorList 方法在日志中看到错误。

要使用上述功能，您必须在脚本中包含 jquery.validate.js 文件

【讨论】：

【解决方案5】：

如果您使用 HTML5 表单验证，则必须在表单的提交处理程序中发送 ajax 请求。提交处理程序只会在表单验证时触发。您正在使用的是一个按钮单击处理程序，它将始终触发，因为它与表单验证没有关联。注意：并非所有浏览器都支持 html5 表单验证。

【讨论】：

【解决方案6】：

不完全确定您的意思。但我假设您想实时检查输入是否有效。如果是这样，您应该使用 .keyup 而不是 .click 事件，因为如果用户按下提交，这将导致操作。看http://api.jquery.com/keyup/

有了这个，您可以检查每个新字符插入和显示的输入，例如“无效”，直到您的验证为真。

我希望这能回答你的问题！

【讨论】：