JavaScript

Respond to form events

You can use JavaScript to respond to user interactions on your form, reveal additional form fields, submit a form, and much more.

Help users fill in additional form controls

Imagine that you built a survey form. After a user selects one option, you want to show an additional <input> to ask a specific question related to the selection. How can you only show the relevant <input> element?

You can use JavaScript to reveal an <input> only when the associated <input type="radio"> is currently selected.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Let's look at the JavaScript code for the demo. Have you noticed the aria-controls, and aria-expanded attributes? Use these ARIA attributes to help screen reader users understand when an additional form control is shown or hidden.

Ensure users can submit a form without leaving a page

Imagine you have a comment form. When a reader adds a comment and submits the form, it would be ideal if they could immediately see the comment without a page refresh.

To achieve this, listen to the onsubmit event, then use event.preventDefault() to prevent the default behavior, and send the FormData using the Fetch API.

Your backend script can check if a POST request appears to be from the browser (using the action attribute of a form element, where method="post") or from JavaScript, such as a fetch() request.

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Always notify screen reader users about dynamic content changes. Add an element with the aria-live="polite" attribute to your HTML, and update the content of the element after a change. For example, update the text to 'Your comment was successfully posted', after a user submits a comment.

Learn more about ARIA live regions.

Validation with JavaScript

Ensure error messages align with your site style and tone

The wording of default error messages differs between browsers. How can you make sure the same message is shown to all users, and that the message aligns with your site's style and tone? Use the setCustomValidity() method of the Constraint Validation API to define your own error messages.

Ensure users are notified about errors in real time

The built-in HTML features for form validation are great for notifying users about invalid form fields before the data is sent to your backend. Wouldn't it be great to notify users as soon as they leave a form field?

Listen for the blur event which fires when an element loses focus, and use the ValidityState interface to detect if a form control is invalid.

Ensure users can see the password they entered

The text entered for <input type="password"> is obscured by default, to respect the privacy of users. Help users to enter their password, by showing a <button> to toggle the visibility of the entered text.

Try out the demo. Toggle the visibility of the entered text, by using the Show Password <button>. How does this work? Clicking on Show Password, changes the type attribute of the password field from type="password" to type="text", and the <button> text changes to 'Hide Password'.

It's important to make the Show Password button accessible. Connect the <button> with the <input type="password"> using the aria-controls attribute.

To notify screen reader users if the password is currently shown or hidden, use a hidden element with aria-live="polite", and change its text accordingly. It's important to enable screen reader users to know when a password is displayed and visible to someone else looking at their screen.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Learn more about implementing a show password option.

Resources

• FormData
• Constraint Validation API
• <input type="password">