1
努力提高我的jQuery技能，我决定创建一个表单并对其进行验证。一切工作正常，但是当我提交我的表单时，我只收到我创建的错误消息之一。如果我尝试提交一个空白表单，我应该得到所有的错误信息，为什么它会在显示第一条错误信息后停止？这是我在这里问过的第一个问题，所以请原谅任何在本文中发布的破坏代码。jquery表单字段自定义消息
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/styles.js"></script>
<title>Form Submit Test</title>
</head>
<body>
<div id="wrapper">
<div class="form_errors">
</div><!--close form_errors-->
<form action="confirmation.html" method="post">
<table border="0" cellspacing="10" cellpadding="10" align="center" bgcolor="">
<tbody>
<tr>
<td width="100" style="" align="left">
User Name
</td>
<td width="170" style="" align="left">
<input type="text" name="first_name" value="First" id="first_name"/>
</td>
</tr>
<td colspan="1" style="" align="left"></td>
<td colspan="1" style="" align="left">
<input type="text" name="last_name" value="Last" id="last_name"/>
</td>
</tr>
<tr>
<td colspan="1" style="" align="left">
Car Make
</td>
<td colspan="1" style="" align="left">
<select name="car_make" id="car_make">
<option>Choose a make</option>
<option value="ford">Ford</option>
<option value="mercury">Mercury</option>
<option value="lincoln">Lincoln</option>
<option value="oldsmobile">Oldsmobile</option>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="lexus">Lexus</option>
</select>
</td>
</tr>
<tr>
<td colspan="1" style="" align="left">
Year
</td>
<td colspan="1" style="">
<select name="car_year" id="car_year">
<option>Choose a year</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
</td>
</tr>
<tr>
<td colspan="1">
Select Service
</td>
<td colspan="1">
<input type="radio" name="service[]" value="quote" class="radio"/> Quote
</td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1">
<input type="radio" name="service[]" value="pick-up" class="radio"/> Pick Up Car
</td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1">
<input type="radio" name="service[]" value="drop-off" class="radio"/> Drop Off Car
</td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="1">
<input type="submit" value="Submit" id="submit"/>
<input type="reset" value="Reset" id="reset"/>
</td>
</tr>
<!--close tbody-->
</tbody>
<!--close table-->
</table>
</form>
</div>
<!--close wrapper-->
</body>
</html>
的jQuery：
$(document).ready(function(){
//custom input toggle function
jQuery.fn.inputtoggle = function(){
$(this).each(function(index){
var myvalue = $(this).attr("value");
$(this).focusin(function(){
if($(this).val() == myvalue)
$(this).val("");
});
$(this).focusout(function(){
if($(this).val() === "")
$(this).val(myvalue);
});
});
};
//use custom function on inputs
$("input[type=text]").inputtoggle();
//style first td in ever tr and add 'td-style' class
$("form table td:first-child").addClass('td-style');
//hide .form_errors div by default
$(".form_errors").hide();
$("#reset").click(function(){
$(".form_errors").empty().hide();
});
$("form").submit(function(e){
/*RADIO BUTTON VALIDATION*/
//check to see if radio buttons have been checked
if($("input[type=radio]:checked").val()){
//if valid, removes content from .form_errors div in case the radio button was previously invalid
$(".form_errors").empty().hide();
//prevents div content from flickering and disappearing.
//the default action for the input is to submit and post to the next page
//http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false
} else{
$(".form_errors").show().append('<p>Radio button is NOT checked.</p>');
return false;
}
/*FIRST NAME VALIDATION*/
if($("#first_name").val() == 'First'){
$(".form_errors").show().append('<p>Please enter your first name.</p>');
return false;
}
var firstName = $("#first_name").val();
var validName = /[A-Za-z]/;
if(!validName.test(firstName)){
$(".form_errors").show().append('<p>You may only enter letters.</p>');
return false;
}
/*FIRST NAME VALIDATION*/
if($("#last_name").val() == 'Last'){
$(".form_errors").show().append('<p>Please enter your last name.</p>');
return false;
}
var lastName = $("#last_name").val();
var validName = /[A-Za-z]/;
if(!validName.test(lastName)){
$(".form_errors").show().append('<p>You may only enter letters.</p>');
return false;
}
//close form submit
});
//close jquery
});
是的，你说得对。别人有同样的问题。在b/c之前，我把返回值设置为false，这是保持错误消息在提交时闪烁的唯一方法。任何想法为什么它会在我把回报放在那里之前闪烁。现在我已经删除了返回错误，错误不闪烁并且一切正常。 – heyjohnmurray
你确定删除所有“返回false”后它的工作正常吗？因为它不应该。错误返回错误的原因是为了防止表单在发生错误时向预期的目标提交。如果您不停止提交，那么即使您的必填字段为空等，它也会继续。 – MSI
实际上，我最终通过提交和做e.preventDefault（）传递e作为参数; – heyjohnmurray