When you click a link in a browser, the default action is to load whatever document or URL is contained in the link. However, there are certain times when you want to prevent that default action from occurring. For example, if a user is in the middle of a long process, you might not want him navigating away before he gets a chance to save his work. This exercise uses the click() function—and it also shows how to prevent the default action from occurring. You can find the code for this example in click.html and click.js in the companion content.

Which method to use? The answer is: it depends. The preventDefault() method prevents only the default action and doesn’t prevent the actual event from continuing. In contrast, return false does both. For many actions, such as the one you saw in this example, preventDefault() is enough to do what you want. Additionally, if you’re not inside a function, as in this example, return false might not work as you expect—meaning it might not work at all or might stop the entire program from continuing.

The click event handler and other event handlers in jQuery work quite well for most uses. There are times, however, when you might need to attach an event handler to something that doesn’t yet exist on the page. For example, if part of your application adds or creates new elements on the page, you can’t connect the click event or anything else to those elements (easily). Fortunately, jQuery has a function called on() that binds an event to elements on the page. In the next section, you’ll see the on() function used to prevent a form submission.

The simplest way to validate a web form is to check the form’s contents when the user clicks on the submit button. The process essentially involves validating each field that requires validation, and stopping the default action (submit) from occurring if there are fields within the form that contain invalid or missing required data. Here’s an exercise that will help illustrate simple form validation. You can find this code in the files validsubmit.html and validsubmit.js in the companion code.

Although this code doesn’t introduce much new material, you’ll find it useful to work through the JavaScript so that you can gain experience with how this example is structured. The entire example is shown within the ready() function, which you already saw.

First, a function is attached to the submit() event. The submit() event is just like other events you’ve seen in this chapter except that it’s attached to a form (because it doesn’t make sense anywhere else):

$('#myForm').submit(function() {

Within the submit() function, a variable is created to store the state of the validation. This variable, called formError, is set to false:

var formError = false;

Next, the submit() event’s function performs a simple check to test whether the user entered values into the text box elements. This is accomplished through an if conditional that uses the jQuery val() function. The val() function retrieves the filled-in value for a form field. In this case, if either of the form elements is blank (empty), the code sets the formError variable to true.

if ($('#customerName').val() == "") {
    formError = true;
}
else if ($('#emailAddress').val() == "") {
    formError = true;
}

At the end of the submit() function, the formError variable is evaluated. If formError is found to be true, the page shows an alert indicating that one or more required fields haven’t been filled in. Additionally, and more importantly, the function returns false, which—as you already saw—means that the default action for the form will be cancelled, and it won’t be submitted until the user corrects the error and submits the form again for validation.

if (formError) {
    alert("One or more required fields missing.");
    return false;
} else {
    alert("Form valid, submitting to server.");
    return true;
}

With this code explained, you’re probably already counting the ways in which invalid data could still get back to the server. Luckily, the server program is always required to validate input data as well! Right now, a simple empty space will suffice to make the fields valid, which is probably not what you want for either a Customer Name or E-mail Address form field. There’s also no validation on the E-mail Address field itself. Making sure there’s at least an @ symbol in the email address would be a good start. Therefore, I’ll show some examples to improve on the validation.

Being new to programming, you might have never heard of the term regular expression. It’s a term used to describe text processing and matching by using symbols to represent characters. Regular expressions make it possible to validate that an email address contains an @ symbol, that a phone number field contains only numbers (and maybe dashes or parentheses), that date fields are valid, and much, much more.

Entire books have been written on regular expressions, and a lot of information is available on the Internet about them as well. This section (and indeed this book) won’t try to introduce regular expressions beyond the cursory glance you get here. What this section does, however, is show you that there are advanced validation techniques available. It’s good to have these techniques in mind for further research and learning.

Regular expressions are particularly helpful for form validation, and it’s that limited focus that you’ll see here. In JavaScript, regular expressions are objects you can define in two ways:

var myRegex = new RegExp(pattern,modifiers);

or

var myRegex = /pattern/modifiers;

Regular expression objects have several methods for processing text, one of which is of particular interest when validating forms: the test() method. Rewriting the previous validation code to use regular expressions calls for two primary changes. First, the regular expressions themselves need to be defined and then the test() method needs to be implemented within the conditionals.

You can find this code in the file regex.js in the js folder of the Chapter 5 companion content. This code will define two regular expressions, one for each text field. The first regular expression is used for the Customer Name text box on the form:

var customerRegex = /[ws]+/;

This regular expression creates something called a character class, which is a special character set to represent matching characters. Character classes are defined with brackets, [ and ]. The w in the regular expression represents any valid letter or number (alphanumeric) and the underscore character. The s represents a space character.

By placing these special characters into the character class, this regular expression will match any alphanumeric characters (and the underscore) as well as any number of spaces. The minimum number of letters or numbers is one, and there also must be one space somewhere in the string in order for this regular expression to match. So this regular expression would match even if the user entered “b ” into the text field. However, even with this flaw, this regular expression validation is still a large improvement over the previous example, which simply checked to make sure that something was filled in.

Likewise, the regular expression used here to check an email address is also a bit crude:

var emailRegex = /@/;

The email regular expression merely looks for the presence of an @ symbol. It’s tempting to try to get fancier with the email address regular expression and begin requiring one or more letters followed by an @ symbol, followed by one or more letters and then a dot, followed by more letters, as in a real email address like [email protected]. However, this quickly fails when considering email addresses with multiple dots in them or domain name structures that aren’t common.

With the regular expressions defined, the next task is to change the conditionals that already exist in the program to use the test() method instead of the standard equality test used previously. The two conditionals now look like this:

if (!customerRegex.test($('#customerName').val())) {
}


else if (!emailRegex.test($('#emailAddress').val())) {
}

Essentially, the value of each field is given as the argument to the test() method of each regular expression. When the regular expressions match, it means someone filled in that field correctly, therefore the conditionals are negated with the exclamation point (!). In plain language, the conditionals now read, “If the customer name field doesn’t contain at least one letter or number and one space, do this” and “Otherwise, if the email address field doesn’t at least have an @ symbol, do this.”

The final code looks like this:

$(document).ready(function() {
    var customerRegex = /[ws]+/;
    var emailRegex = /@/;
    $('#myForm').submit(function() {
           var formError = false;
        if (!customerRegex.test($('#customerName').val())) {
            formError = true;
        }
        else if (!emailRegex.test($('#emailAddress').val())) {
            formError = true;
        }

        if (formError) {
            alert("One or more required fields missing.");
            return false;
        } else {
            alert("Form valid, submitting to server.");
            return true;
        }
    });
});

Radio buttons, such as those shown on the form for choosing Delivery or Carryout, are useful when you want the visitor to be able to select one, and only one, choice from a set of options. In this example, visitors can have their pizza delivered, or they can come pick it up—but they can’t do both. In contrast, you use check boxes when you want users to be able to select multiple values from a list, such as with pizza toppings.

As mentioned earlier, jQuery includes a :checked filter for determining whether an element is checked or unchecked. You use the :checked filter in combination with a selector, and typically along with an additional filter, called name.

In the examples already shown, each text field had its own id assigned to it. However, elements such as radio buttons and check boxes all share the same name, and it can be cumbersome to assign a unique id value to each one. But by using a combination of selectors and filters correctly, you can drill down to any form element without having to give each element an id or class. Recall that this is the radio button structure in the HTML you already saw:

Carryout: <input type="radio" name="orderType" value="carryout"><br />
Delivery: <input type="radio" name="orderType" value="delivery"><br />

The code for retrieving the checked value from the orderType radio buttons looks like this:

$(':input[name="orderType"]:checked').val()

That single line of jQuery code retrieves the value of whichever radio button element is selected—in this case, either Carryout or Delivery. The code uses the :input selector, which retrieves all the form elements and then applies another selector to narrow down the results to the specific element named orderType. Finally, it applies the filter to retrieve only the selected element. If no element is selected, jQuery returns undefined.

With check boxes, multiple values can be selected. Getting the selected values means looping through the selected elements and testing each one to see if it’s selected. In jQuery, you can do that in one simple call; in fact, the basic syntax for selecting selected (“checked”) elements looks the same as that for determining which radio button is selected:

$(':input[name="toppings"]:checked')

However, because several elements might be selected, instead of merely using val() to retrieve the value as you can with the radio buttons, you use the jQuery each() function to loop through each selected element. The each() function is similar to a for loop. Within the each() function, you can then process the value of the current element by using the this keyword. Here’s some sample code that creates an alert dialog for each selected element:

$(':input[name="toppings"]:checked').each(function() {
    alert($(this).val());
});

if ($(':input[name="orderType"]:checked').val() == undefined) {
        formError = true;
    }

if ($(':input[name="toppings"]:checked').val() == undefined) {
        formError = true;
    }

Another common form element is a drop-down box, known as a <select> in HTML terms. The example form uses a drop-down box so that users can select the crust type for their pizza. The crust can be one of multiple options, but it can’t be more than one. Generally, radio buttons are good when there are only a few options that can be shown on the page easily, while drop-down lists are better when there are many options, such as when choosing a U.S. state (such as Wisconsin, California, or Hawaii) from among all the states.

The example HTML shown used a <select> element that presented two options for the type of pizza crust:

<select name="crust">
<option value="">Please choose...</option>
<option value="thin">Thin</option>
<option value="deepdish">Deep Dish</option>
</select>

You can determine which drop-down element the user selected with the :selected filter. The syntax is the same as that for determining the status of check boxes and radio buttons:

$(':input[name="crust"] :selected').val()

The obvious difference is that the preceding code uses the :selected filter rather than the :checked filter, but a not-so-obvious change is that you must include a space between the selector :input[name=“crust”] and the filter :selected because the filter needs to apply to the elements below the selector (the <option> elements) rather than the <select> element itself.

if ($(':input[name="crust"] :selected').val() == "") {
    formError = true;
}

$(document).ready(function() {
    var customerRegex = /[ws]+/;
    var emailRegex = /@/;
    $('#myForm').submit(function() {
        var formError = false;
        if ($(':input[name="orderType"]:checked').val() == undefined) {
            formError = true;
        }
        else if (!customerRegex.test($('#customerName').val())) {
            formError = true;
        }
        else if (!emailRegex.test($('#emailAddress').val())) {
            formError = true;
        }
        else if ($(':input[name="crust"] :selected').val() == "") {
            formError = true;
        }
        else if ($(':input[name="toppings"]:checked').val() == undefined) {
            formError = true;
        }
        else {
            // Here's the first place that you know the form is valid.
            // So you can do fun things like enumerate through checkboxes.
            // $(':input[name="toppings"]:checked').each(function() {
            //  alert($(this).val());
            // });
        }

        if (formError) {
            alert("One or more required fields missing.");
            return false;
        } else {
            alert("Form valid, submitting to server.");
            return true;
        }
    });
});

One feature found on many forms is the ability to react to the click event. In the example form used in this chapter, when the visitor selects The Works! as a pizza topping, all the related check boxes for toppings should become selected. Conversely, if a user clears any individual toppings, The Works! option should be cleared. You can perform this task in multiple ways. The method I’ll show uses the jQuery prop() function.

The prop() function sets a property of an element. In this case, you want to set the checked property of several check boxes. Alternatively, if one of the other elements is left clear, you want to remove the checked property from the The Works! check box. You can accomplish this using the removeProp() function.

The other piece of this puzzle is to add a handler to the click event for each of the check boxes. You accomplish this with the on() function that you’ve already seen. Here’s an exercise that implements this functionality. You can find this code in the companion content in the files click-on.html and click-on.js.

Figure 5-9. Clearing any of the other toppings also clears The Works! because this pizza no longer has everything on it.

This exercise added to the previously explained validation code by adding a new function and a click event handler that uses the jQuery on() function that was explained previously in this chapter. Here’s an explanation of this code:

function theWorks(elm) {
    if (elm.val() == "works") {
        $('#mush').prop("checked","checked");
        $('#peppers').prop("checked","checked");
        $('#sausage').prop("checked","checked");
    } else {
        $('#works').removeProp("checked");
    }
} //end function theWorks

The code creates a function called theWorks, which accepts one argument, elm—the element that was selected. Inside this function, if the value (val()) of the element is works (from the form’s value), the checked property is enabled on each of the other toppings using the jQuery prop() function.

On the other hand, if the element’s value is not works—in other words, if one of the other toppings was selected—The Works should be cleared. The code accomplishes with the removeProp() function, which removes the checked property from the element with the id works.

Next the code adds a click event handler using the jQuery on() function. This is applied to all input elements with the name toppings. The click event handler does only one thing: it calls the function called theWorks and sends along the selected element to that function.

  $(':input[name="toppings"]').on("click", function() {
        theWorks($(this));
    });

You’ve now seen how to validate several types of form elements, and you’ve also seen an extended example of the click() event. The final section in this chapter briefly illustrates the keypress event.