Write JavaScript for the Web

NEVER TRUST USER INPUT!

If development is new to you, this may be the first time you have heard the above saying.  While it is often said semi-jokingly, it is vital to validate user input before sending it to a server (and again once it arrives there, but let's take things one step at a time!).

Validation can be as simple as making sure that the type of data is correct (number vs. string, valid email address, etc.); it can also be more complex — checking for password strength, for example, or parsing a comment to make sure it contains no URLs.

In this chapter, we are going to cover a few ways you can validate user input with JavaScript.

During input

As we discovered in the previous chapter, the  input  event is triggered whenever the user enters data into a given  <input>  element.  We can use this to check data as it is entered.

Practice!

Head to CodePen Exercise P2CH2a and follow the instructions below.

To demonstrate leveraging the input event for form validation, we're going to use the length of the string entered to dynamically update the disabled property of the Submit button to prevent the user from submitting an invalid password. In this case, the only requirement for the password is that it be between 6 and 12 characters. 

1. Start by adding an input event listener to passwordInput that captures the $event object.

2. Now add a conditional statement that checks the length property of $event.target.value and updates the submitButton accordingly.

Once you've given it a go, watch me code a solution and see how your approach compares:

After input is complete

We can leverage the  blur  event to wait until the user has finished entering data and clicked or tabbed away from a control to validate its contents.

Practice!

Head to CodePen Exercise P1CH2b and follow the instructions below.

We've all had the experience, whilst tabbing through a form, of a field turning red and an error message appearing when something wasn't quite right. In this exercise, we're going to use the blur event from the Confirm Password field to check if both password fields match. If they don't, we'll add red borders and display a message. If they do, we'll add green borders and hide the message. 

1. Add a blur event listener to the confirmPassword element.

2. Compare the value properties of both inputs.

   • If they are the same, set the border styles to thin solid green and set the display style of errorMsg so that it disappears.

   • If they are different, set the border styles to thin solid red and set the display style of errorMsg so that it appears.

Once you've given it a go, watch me code a solution and see how your approach compares:

Using HTML5 constraints

There are many properties we can give our HTML form elements to very easily enforce simple validation.

Practice!

Head to CodePen Exercise P2CH2c and follow the instructions below.

Using HTML constraints saves us time and energy for basic form validation. In this example, we are going to make sure we have data in each field and a string that resembles an e-mail address in the E-mail field.

1. Start by simply adding required as a property on the first password <input>. What happens if you try to submit the form without entering a password?

2. Now add the required property to both other fields, making sure there will be data in each before the user can submit the form.

3. We can also use RegEx strings with the pattern property to enforce the "shape" the data must conform to. Add the pattern=".+@.+\..+" property to the E-mail field. This RegEx enforces the "something@something.something" pattern.

4. Now try entering different strings into each field, and see what happens when you try to submit the form.

Once you've given it a go, watch me code a solution and see how your approach compares:

Let's recap!

In this chapter, we covered the following techniques for user input validation:

• during input with the input event,

• after input is complete with the blur event,

• HTML constraints such as required or pattern.

Of course, you can mix and match as many of these as you need.  You can also add validation to the submit listener, giving a form one last check before submitting it.  Front-end validation can only go so far, and servers must do their own validation too, to make sure that the incoming data is not harmful in any way. Using JavaScript to validate forms before sending them can save a lot of headaches!

Now that you know how to receive data from your users, in the next chapter, we will look at requesting data from a server.