• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 8/5/19

Validate forms

Log in or subscribe for free to enjoy all this course has to offer!

Checking data inputted by users before it gets sent to a server is a major use of JavaScript with web forms. You can also immediately alert a user to problems with their input, which improves the user's experience, since they won't have to deal with constant retrying if they submit the wrong type of data.

Validation can happen in several ways:

  • as input is being entered;

  • after input is entered;

  • when the user submits the form.

This last technique only involves adding validation in the submit event handler for the form. We'll look at each technique one at a time, using the example form from the last chapter!

Instant validation

Validation while a user is inputting information is based on input events, which are triggered on an input zone each time its value changes.

The following code example adds an input event handler on the password field. This handler checks the length (number of characters) of the password being typed and shows a message to the user with specific content and color.

// Validate password length
document.getElementById("password").addEventListener("input", function (e) {
    var password = e.target.value; // Value of the password field
    var passwordLength = "weak";
    var messageColor = "red"; // Weak password => red
    if (password.length >= 8) {
        passwordLength = "strong";
        messageColor = "green"; // Long password => green
    } else if (password.length >= 4) {
        passwordLength = "moderate";
        messageColor = "orange"; // Moderate password => orange
    }
    var passwordHelpElement = document.getElementById("passwordHelp");
    passwordHelpElement.textContent = "Strength: " + passwordLength; // helper text
    passwordHelpElement.style.color = messageColor; // helper text color
});

Post-input validation

A text zone's input is considered finished once focus is lost on the zone, which kicks off a blur event that you can use to trigger validation.

Let's imagine that you want to validate the presence of an @ in the email address entered by a user. You'll need the JavaScript method indexOf to do this, which will let you find a value in a string of characters and send a value of -1 if the value isn't found.

Here's the JavaScript code which shows this validation.

// Checking an email address once it's entered
document.getElementById("emailAddress").addEventListener("blur", function (e) {
    var emailAddressValidity = "";
    if (e.target.value.indexOf("@") === -1) {
        // the email address doesn't contain @
        emailAddressValidity = "invalid address";
    }
    document.getElementById("emailHelp").textContent = emailAddressValidity;
});

Summary

  • Submitting a form triggers a submit event on a form. You can prevent the sending of data associated with this event handler by using the preventDefault method on the associated Eventobject.

  • Any modification of a text field triggers an input event, which can be used to validate its data in real time.

Example of certificate of achievement
Example of certificate of achievement