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.