Helps prevent the :invalid
/:valid
styles from showing until after the form has been submitted.
The setup is fairly simple, a few small HTML tweaks and you’ll be ready to style your error messages.
1. Add novalidate
to your <form>
tag:
<form novalidate></form>
2. Include the .js
file directly from the published GitHub Pages branch:
<script src="https://thomasjbradley.github.io/form-validation-helper/index.js"></script>
3. Style the :invalid
/:valid
states in CSS—prepend the selectors with .is-validated
, e.g.:
.is-validated input:invalid {
border-color: #f33;
}
Also the data-state="invalid"
attribute will be added to the <form>
tag (and the <input>
, <textarea>
& <select>
tags) when validation has failed. (data-state="valid"
when validation passed.)
<form novalidate class="is-validated" data-state="invalid"></form>
If there is no <form>
tag, only field tags, the data-state="invalid"
attribute & .is-validated
class will be added directly to the <input>
itself. So, the CSS would change a little, like this:
.is-validated input:invalid,
input.is-validated:invalid {
border-color: #f33;
}
It’s pretty common to have a group of checkboxes and want users to select at least one of them. HTML cannot do this by itself.
To get basic checkbox group validation add the class one-of-many
to the surrounding <fieldset>
:
<fieldset class="one-of-many">
<legend>Select all that apply</legend>
<!-- All the checkboxes in here -->
</fieldset>
When a checkbox hasn’t been selected the <fieldset>
will receive a data-state
attribute of invalid
:
<fieldset class="one-of-many" data-state="invalid"></fieldset>
We can use the .one-of-many[data-state="invalid"]
selector to show the appropriate error message to our users.
Similarly, when there isn’t a <form>
this will also apply to groups of radio buttons inside a <fieldset>
.
© 2018–2020 Thomas J Bradley
Licensed under the MIT License