Class: Form

Form()

<brut-form>

A web component that enhances a form it contains to make constraint validations easier to manage and control.

This provides two main features:

  • While the :user-invalid selector allows you to target inputs that have been interacted with (thus avoiding issues when using :invalid), this still creates the experience of a user tabbing off of a control and getting an error message. If, instead, you only want to show these errors when a submit has been attempted, this element will set submitted-invalid on itself when that happens, thus allowing you to target invalid fields only after a submission attempt.
  • You may wish to control the messaging of client-side constraint violations beyond what the browser gives you. Assuming your INPUT tags are inside a container like LABEL, a brut-cv tag found in that container (i.e. a sibling of your INPUT) will be modified to contain error messages specific to the external:ValidityState of the control.

Constructor

new Form()

Properties:
Name Type Description
submitted-invalid boolean

set by this element when the form is submitted. Does not trigger any behavior and can be used in CSS.
Source:
See:
Fires:
  • brut:invalid Fired when any element is found to be invalid
  • brut:valid Fired when no element is found to be invalid. This should be reliable to know when constraint violations have cleared.event:
Example

Basic Structure Required

<brut-form>
  <form ...>
    <label>
      <input type="text" required name="username">
      <brut-cv-messages>
      </brut-cv-messages>
    </label>
    <div> <!-- container need not be a label -->
      <input type="text" required minlength="4" name="alias">
      <brut-cv-messages>
      </brut-cv-messages>
    </div>
    <button>Submit</button>
  </form>
</brut-form>
<!-- after a submit of this form, the HTML will effectively be as follows -->
<brut-form submitted-invalid>
  <form ...>
    <label>
      <input type="text" required name="username">
      <brut-cv-messages>
        <brut-cv>This field is required</brut-cv>
      </brut-cv-messages>
    </label>
    <div> <!-- container need not be a label -->
      <input type="text" required minlength="4" name="alias">
      <brut-cv-messages>
        <brut-cv>This field is required</brut-cv>
      </brut-cv-messages>
    </div>
    <button>Submit</button>
  </form>
</brut-form>