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

如果绑定到提交事件而不是单击它，则只有在通过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;
});

Answer 5

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

使用此功能，您可以检查每个新字符插入的输入并显示，例如“无效”，直到您的验证为真。

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

Answer 6

U也可以使用jquery验证方法验证表格，如

$（“＃form id”）。validate（）;

根据表单验证返回布尔值＆amp;你也可以使用errorList方法在日志中看到错误。

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

ajax提交前的HTML5验证

6 个答案: