246996016-HTML5-Step-by-Step

JavaScript Events and jQuery 301
});
The code introduces a few new concepts, namely the if conditional. In this case, the code
uses the if conditional to test whether the value entered by the user matches what you’re
expecting from the text field on the form. The jQuery .val() function in the preceding
code is also new here. The .val() function obtains the value of whatever has been entered
into the text box (or whatever element has been selected). Finally, when the text box is
not filled in correctly, there’s a return false; statement. In this context, return false; indicates
that processing of the Web form should not continue, and the form should not be
submitted.
When submitted with a value of Yes in the text box, the code displays an alert and continues
with form submission. If the user enters anything else and submits the form, the
validation code displays an alert indicating that the form wasn’t filled in correctly, and
halts form submission to the server by returning false.
A more complex yet more user-friendly approach for handling errors is to change the
background color on the form field that was filled in incorrectly. Obviously, for the one
field form in this example, it’s clear which field is incorrect. But on a more complex form,
it may not be as obvious which field contains an incorrect value. Here’s the code to
change the background color:
$("#myForm").submit(function() {
if ($("#firstName").val() == "Yes") {
alert("Form entered correctly");
} else {
$("#firstName").css("backgroundColor","red");
return false;
}
});
This code changes the backgroundColor of the form element identified by the id first
Name to red when filled in incorrectly. However, best practice dictates not changing CSS
style information within JavaScript code. It’s much better to add and remove CSS styles
from elements. Doing so makes troubleshooting easier and results in cleaner code all
around.
jQuery has functions to add and remove CSS classes from elements: the aptly titled .
addClass() and .removeClass() functions. On form validation pages, I’ll typically create a
CSS error class that sets the background color to a red (or a reddish color that attracts
attention).