HTML5 AJAX验证之前提交(HTML5 validation before ajax subm

这应该是简单的，但它的驾驶我疯了。我有我使用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");
        }
    });
});

Answer 1:

默认情况下，jQuery的不知道的HTML5验证什么，所以你必须做一些事情，如：

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

Answer 2:

如果你绑定到submit事件，而不是点击，如果它通过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");
        }
    });
});

Answer 3:

如果使用的是HTML5表单验证，你必须在发送表单的提交处理Ajax请求。如果表单验证提交处理程序才会触发。什么你使用的是一个点击按钮的处理程序，这将始终触发，因为它与表单验证无关。注意：并不是所有的浏览器支持HTML5的表单验证。

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;
});