autovalid

WHAT IT DOES

Automatically adds and removes CSS class .invalid depending on the current status of HTML validation. If any form element becomes invalid, an .invalid class will be added to that element and also to it's parent <fieldset> tag (if present) as well as to the parent form element.

HOW TO USE

Just import 'autovalid' on the client side and add a data-autovalid attribute to any forms you want validated. If any child widgets of form[data-autovalid] fail because of HTML5 validation (for example if you've added a required attribute and the field is empty), then an .invalid CSS class will be added to affected elements as described above.

WHY NOT JUST USE :invalid?

HTML5 validation is cool. Want a field to be required? Just add a required attribute to the tag. Wanna loosely validate an email address? Just make the input type="email". If a field is invalid, the element gets a pseudo-selector of :invalid which you can use to style the field (for example by giving it a red border). And this is where the trouble begins 😱. For one thing, your form will probably start out invalid by default. Duh. So, the way this standard has been implemented, using :invalid to style things is basically a non-starter.

Instead, we'll add an event listener to add a class of .invalid when an element becomes invalid – which happens on blur and submit events. Then we'll remove that class whenever the field is updated and the field is valid.

WRAPPING fieldset TAG

If you wrap your input in a <fieldset> tag in order to associate the input with the parent fieldset, then the wrapping fieldset will also have the class .invalid added and removed. This makes it possible to even do things like have a custom error message which is hidden until the parent fieldset gets the .invalid class.

FORM TAG

If any elements within the form are invalid, then the <form> tag itself will also receive an .invalid class. This makes it possible to display a generic message like "Please correct the above errors" using CSS only. For example:

<style>
  form .invalid-message {
    display: none;
  }
  form.invalid .invalid-message {
    display: block;
    color: red;
  }
</style>

<form>
  ...
  ...
  <h2 class="invalid-message">Please correct the above errors.</h2>
</form>

ALL TOGETHER NOW

It's actually a lot simpler than it sounds. This is all it does:

1. Importing autovalid on a page will add listeners to all inputs, selects, and textareas who are children of form elements with a data-autovalid attribute.

2. When a form field becomes invalid according to HTML5 validation:

• .invalid class is added to the form field element
• .invalid class is also added to the parent <fieldset> tag (if present)
• .invalid class is added to the parent <form> tag
• disabled attribute is added to the submit button (if present)

3. When a form field becomes valid again: The above steps are reversed.

...and that's it. It just adds and removes the .invalid class so you can style stuff with CSS depending on the current state of HTML5 validation.

OPTING OUT FOR SPECIFIC FIELDS

To opt out of autovalid for a specific field, just add a data-autovalid="false" attribute to the field. For example:

<input type="text" name="fullName" data-autovalid="false" />

BASIC EXAMPLE

<script>
  import 'autovalid';
</script>

<style>
  input.invalid {
    border: 2px solid red;
  }

  fieldset .invalid-message {
    display: none;
  }

  fieldset.invalid .invalid-message {
    display: block;
    color: red;
  }
</style>

<form method="post" data-autovalid>
  <fieldset>
    Full Name
    <input type="text" name="fullName" required />
    <span class="invalid-message">Please enter your full name.</span>
  </fieldset>

  <button type="submit">Submit</button>
</form>