HTML5在Ajax提交之前的验证

Question

这应该是简单的，但它让我发疯。我有一个HTML5表单，我正在使用ajax提交。如果您输入无效值，会弹出一个响应告诉您如此。在运行我的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="[e-mail]" />
  <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");
        }
    });
});

- Sorry-Im-a-N00b

Answer 1

如果您绑定submit事件而不是click事件，它只会在通过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");
        }
    });
});

- csbarnes

---

这应该是被接受的答案，因为在提交事件之前会触发HTML5验证。基本上，在监听提交事件后，阻止默认操作即可完成任务。不需要像被接受的答案中所示那样调用checkValidity()方法，因为如果HTML5验证未通过，提交事件将不会被触发。 - Laurent DECLERCQ a.k.a Nuxwin

尽管你说的话与此不同，但没有任何验证它就被激活了。我的代码部分如下：$('#begininstall').on('click',function(){ $('#formbegininstall').submit(); });$('#formbegininstall').on('submit',function(ev){ ev.preventDefault(); var serializado = $('#formbegininstall').serialize(); $.ajax({ - Marcelo Agimóvel

我无法编辑之前的答案。我的问题是我在使用链接提交ajax。我所要做的就是用提交按钮替换链接。 - Marcelo Agimóvel

Answer 2

默认情况下，jQuery 不了解 HTML5 验证，因此您需要执行类似以下操作：

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

- antinescience

---

在提交事件中返回false，就像OP所做的那样，这正是我所期望的。 - Mr_Green

阻止默认操作，返回 false...请参考 csbarnes 的回答，该回答更准确。 - Laurent DECLERCQ a.k.a Nuxwin

这个可以运行，但我发现一个小问题，即它不显示带有"required"属性的元素弹出框。 - eduardo a

Answer 3

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

- Musa

Answer 4

我更喜欢使用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;
});

- Mfoo

Answer 5

我不太确定你的意思。但是我猜你想实时检查输入是否有效。如果是这样，你应该使用.keyup而不是.click事件，因为后者会在用户提交时触发操作。请参考http://api.jquery.com/keyup/。

通过这种方式，你可以在每次插入新字符时检查输入，并显示例如“无效”，直到验证成功为止。

希望这回答了你的问题！

- Kurt

Answer 6

你也可以使用jQuery验证方法来验证表单，例如： $("#form id").validate();

它会根据表单验证返回布尔值，并且你还可以使用errorList方法在日志中查看错误。

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

- Amol