HTML Form Controls

Back

Validation

Browser built-in: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation (opens in a new tab)

Styles

Custom styles:

using novalidate attr, e.g. <form novalidate>

Default styles:

using :invalid, :invalid pseudo classes

Example:

Only show next form control when current is valid with css sibling selector ~

/* Hide the fieldset after an invalid fieldset */
fieldset:invalid~fieldset {
  display: none;
}

Boostrap form

https://getbootstrap.com/docs/5.1/forms/validation/ (opens in a new tab)

Apply .was-validated to form element, triggered by form submission.