Question

单击表单提交按钮时，将调用验证所有字段的函数。但是，如果验证失败，则不会发生任何事情。

我使用mailto:作为我的行动，这会有所作为吗？我想澄清两件事：

这是单击提交按钮时调用函数的正确方法吗？

$(document).ready(function(){
    $('#contactForm').submit(function(){
        checkMail();
    });
});

即使我正在使用mailto:，我仍然可以验证字段吗？

以下是代码的其余部分：

function checkEmail(){
    var email = document.contact.email.value;

    if(email == "") {
        document.getElemtById("email_error").innerHTML = "No Email Address";
        return false;
    }
    else {
        document.getElementById("email_error").innerHTML = ""
        return true;
    }
}

HTML：

<form name="contact" action="mailto:exampleemail@hotmail.com" method="post">
    <li>
        <label for="email">Email</label>
    <input id="email" type="text" name="email" placeholder="Enter Email Address">
    </li>
    <span id="email_error"></span>

此外，我没有收到有关点击提交的错误消息。

Answer 1

不，如果验证失败，您需要return false的事件处理程序。这将阻止执行操作，即启动邮件程序。

我们可以通过在事件对象上调用.preventDefault（）或从我们的处理程序返回false来取消提交操作。

Source

像这样修改：

$(document).ready(function(){
    $('#contactForm').submit(function(){
        return validate();
    });
});

当然，这意味着validate()函数需要实际返回false以防验证失败，和 true 否则

进一步您在id="contactForm"标记上遗漏了<form>。

此外，您需要正确获取电子邮件值：

var email = $("#email").val();

还有一个错误：你拼错了getElementById()。这是一个更正版本：

function checkEmail() {
    var email = $("#email").val();

    if (email == "") {
        document.getElementById("email_error").innerHTML = "No Email Address";
        return false;
    }
    else {
        document.getElementById("email_error").innerHTML = ""
        return true;
    }
}

或者，使用所有jQuery：

function checkEmail() {
    var email = $("#email").val();
    var $error = $("#email_error");
    if (email == "") {
        $error.html("No Email Address");
        return false;
    }
    else {
        $error.html("");
        return true;
    }
}

Answer 2

以下是您的需求：

$(document).ready(function(){
   $('#contactForm').submit(function(){
       if (!validate()) {
           return false; // Prevent the submit
       }
   });
});

Answer 3

为了验证表单的字段，在发送之前，您可以使用jQuery的验证插件：

$(document).ready(function(){

    $("#contactForm").validate({
        submitHandler: function(form) {
            // some other code
            // maybe disabling submit button
            // then:
            $(form).submit();
        }
    });

});

查看在线文档以获取更多信息和示例：http://docs.jquery.com/Plugins/Validation#Validate_forms_like_you.27ve_never_been_validating_before.21

使用jQuery验证表单

3 个答案: