Help users enter the right data in forms

Browsers have built-in features for validation to check that users have entered data in the correct format. You can activate these features by using the correct elements and attributes. On top of that, you can enhance form validation with CSS and JavaScript.

Why should you validate your forms?

You learned in the previous module how to help users avoid having to repeatedly re-enter information in forms. How can you help users enter data that's valid?

It's frustrating to fill out a form without knowing which fields are required, or the constraints of those fields. For example, you enter a username and submit a form—only to find out that usernames must have at least eight characters.

You can help users with that by defining validation rules and communicating them.

Help users from accidentally missing required fields

You can use HTML to specify the correct format and constraints for data entered in your forms. You also need to specify which fields are mandatory.

Try to submit this form without entering any data. Do you see an error message attached to the <input> telling you that the field is required?

This happens because of the required attribute.

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

You already learned that you can use many more types, for example, type="email". Let's have a look at a required email <input>.

Try to submit this form without entering any data. Is there any difference from the demo before? Now insert your name in the email field and try to submit. You see a different error message. How is that possible? You get a different message because the value you entered isn't a valid email address.

The required attribute tells the browser that the field is mandatory. The browser also tests if the entered data matches the format of the type. The email field shown in the example is only valid if it's not empty and if the entered data is a valid email address.

Help the user enter the correct format

You learned how to make a field mandatory. How would you instruct the browser that a user must enter at least eight characters for a form field?

Give the demo a try. After your change, you should not be able to submit the form if you enter less than eight characters.

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

Communicate your validation rules

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

Make sure all users understand your validation rules. For this, connect the form control with an element that explains the rules. To do so, add an aria-describedby attribute to the element with the id of the form.

Pattern attribute

Sometimes you want to define more advanced validation rules. Again, you can use an HTML attribute. It's called pattern, and you can define a regular expression as the value.

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

Here, only lowercase letters are allowed; the user has to enter at least two characters, and not more than twenty.

How would you change the pattern to also allow uppercase letters? Try it out.

Add styles

You have now learned how to add validation in HTML. Wouldn't it be great if you could also style form controls based on the validation status? This is possible with CSS.

How to style a required form field

Show the user that a field is mandatory before they interact with your form.

You can style required fields with the :required CSS pseudo class.

input:required {
  border: 2px solid;
}

Style invalid form controls

Do you remember what happens if data entered by the user is invalid? The error message attached to the form control appears. Wouldn't it be great to adapt the appearance of the element when this happens?

You can use the :invalid pseudo-class to add styles to invalid form controls. In addition, there is also the :valid pseudo-class for styling valid form elements.

There are more ways to adapt your styles based on validation. In the module about CSS you will learn more about styling forms.

Validation with JavaScript

To further enhance validation of your forms you can use the JavaScript Constraint Validation API.

Provide meaningful error messages

You learned before that error messages are not identical in every browser. How can you show the same message to everyone?

To achieve this, use the setCustomValidity() method of the Constraint Validation API. Let's see how this works.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

Query the element where you want to set the custom error message. Listen to the invalid event of your defined element. There you set the message with setCustomValidity(). This example shows the message Please enter your name. if the input is invalid.

Open the demo in different browsers, you should see the same message everywhere. Now, try to remove the JavaScript and try again. You see the default error messages again.

There is much more you can do with the Constraint Validation API. You’ll find a detailed look at using validation with JavaScript in a later module.

How to validate in real-time You can add real-time validation in JavaScript by listening to the onblur event of a form control, and validate the input immediately when a user leaves a form field.

Click the form field in the demo, enter "web" and click somewhere else on the page. You see the native error message for minlength below the form field.

Learn more about implementing real-time validation with JavaScript in an upcoming module.

Check your understanding

Test your knowledge of validating forms

Resources

• Disable the payment button once the form is submitted
• Add CSS to make the form work better