使用jQuery验证表单

Question

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

我使用mailto:作为我的动作，这是否有所作为？点击提交按钮时

1. 这是正确的方式来调用一个函数：
   我希望得到两件事情澄清？

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

2. 可我即使我使用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()函数需要实际的情况下，验证失败，和true否则返回false 。

更多您在<form>标记上缺少id="contactForm"。

此外，您还需要正确抢电子邮件值：

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