in an effort to improve my jquery skills i’ve decided to create a form and validate it. everything is working fine, but when i submit my form i only get one of the error messages that i’ve created. i should get all the error messages if i try to submit a blank form, why does it stop after it displays the first error message? this is the first question i’ve ever asked on here so please excuse any mangled code that gets posted on this one.
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
});
In short, if you have a look at your if statements, you are using “return false” after each check. This way the form prevents itself from submitting itself but this also stops the flow of execution and gets out of the whole method straight from the condition-satisfying “if” block. That’s why only the first check, whichever is triggered in the order of how its organized in your code, is executing.