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