JavaScript and Ajax for the Web: Visual QuickStart Guide, Seventh Edition

Making Fields Required

When filling out a form, you may want to specify particular fields that are required to be filled out by the user before the form can be submitted. You can use JavaScript to check that some or all fields are filled out. In this example, we use HTML, CSS, and JavaScript (Scripts 7.5, 7.6, and 7.7, respectively) to highlight fields that are not filled out with a red border and a yellow interior. The check occurs when the user clicks the form’s Submit button.

Here’s the big picture: the class attributes in the HTML store which checks we want the JavaScript to do. If a check is failed, we add invalid to the list of class attributes. Doing that causes (1) the form submission to fail, and (2) the CSS in Script 7.6 to change ...