Validating user input

Functions

Objects

Array Properties and Methods

DOM

Built-in Objects

Using Events in JavaScript

Handling Input and Output

Ajax and JSON

One of the most common uses for JavaScript is to check, or validate, form input before submitting user input to the server. JavaScript form validation provides an extra safeguard against bad or potentially unsafe data making its way into a web application. It also provides users with instant feedback about whether they’ve made a mistake. Some of the most common JavaScript input validation tasks have been replaced by HTML attributes in HTML5. However, due to browser incompatibilities, it’s still a good practice to validate user-submitted data using JavaScript.

In the calculator program in Listing 12-4, the input type was set to number for the operand units. This should cause the browser to prevent the user from submitting non-numeric values into these fields. Because the number input type is relatively new, you can’t always count on the browsers to support it, so using JavaScript user input validation is important. Listing 12-5 demonstrates an input validation script. The important thing to notice here is that the action of the form has been set to the input validation function. The submit() method of the form runs only after the tests in the input validation function have finished. The line in the preceding code that does the real magic is this strange-looking

one inside of the validate() function:

if (/^\d+$/.test(first) && /^\d+$/.test(second)) { ... }

The characters between / and / make up what’s called a regular expression. A regular expression is a search pattern made up of symbols that represent groups of other symbols. In this case, we’re using a regular expression to check whether the values the user entered are both numeric. You can find out more about regular expressions in Chapter 14.Input validation is such a common use for JavaScript that many different techniques have been created for doing it. Before you reinvent the wheel for your particular JavaScript application, do a search for “open source JavaScript input validation” and see whether any existing libraries of code can save you some time and give you more functionality.

Listing 12-5: Performing Input Validation with JavaScript

<html>
  <head>
    <title>Math Fun</title>
    <script>
      function registerEvents() {
        document.mathWiz.operate.addEventListener('click',validate);
      }
      function validate() {
        var first = document.mathWiz.numberOne.value;
        var second = document.mathWiz.numberTwo.value;
        var operator = document.mathWiz.operator.value;
        if (/^\d+$/.test(first) && /^\d+$/.test(second)) {
          doTheMath();
        }
        else {
          alert("Error: Both numbers must be numeric");
        }
      }
      function doTheMath() {
        var first = parseInt(document.mathWiz.numberOne.value);
        var second = parseInt(document.mathWiz.numberTwo.value);
        var operator = document.mathWiz.operator.value;
        switch (operator){
          case "add":
          var answer = first + second;
          break;
          case "subtract":
          var answer = first - second;
          break;
          case "multiply":
          var answer = first * second;
          break;
          case "divide":
          var answer = first / second;
          break;
        }
        document.mathWiz.theResult.value = answer;
      }
    </script>
  </head>
  <body onload="registerEvents();">
    <div id="formErrors"></div>
    <form name="mathWiz">
      <label>First Number: <input type="number" name="numberOne"></label><br>
      <label>Second Number: <input type="number" name="numberTwo"></label><br>
      <label>Operator:
        <select name="operator">
          <option value="add"> + </option>
          <option value="subtract"> ‐ </option>
          <option value="multiply"> * </option>
          <option value="divide"> / </option>
        </select>
      </label><br>
      <input type="button" name="operate" value="Do the Math!"><br>
      <label>Result: <input type="number" name="theResult"></label>
    </form>
  </body>
</html>