Web Programming with HTML5, CSS, and JavaScript

9.20 JavaScript for the Improved Water Balloons Web Page

In the last section, we journeyed into the exciting world of comparison operators and logical operators. In this section, we put those operators into practice while we improve the input validation for the Water Balloons web page. Specifically, we add JavaScript to display error messages after the user submits a form with invalid input.

You might recall from our earlier Water Balloons web page discussion that you can use CSS to perform constraint validation before the form is submitted. After the form is submitted (by clicking a button that executes an onclick event handler), you can use JavaScript to call the form object’s checkValidity method. If it returns false, that means at least ...