Form Validation

npm2.0.0

You can use the form components with any validation library or framework of your choice. The form components sync with the native HTML5 form validation system built into the browser.

Field messages can be synced to the HTML5 form validaiton by setting the error attr with a ValidityState value on a field message. Validation can be disabled alltogether by using the novalidate attribute on the form.

Validation

code

<script type="module">
  import '@blueprintui/components/include/input.js';
  import '@blueprintui/icons/include.js';
  import '@blueprintui/icons/shapes/close.js';

  const form = document.querySelector('form');
  const input = document.querySelector('bp-input');
  const clearInput = document.querySelector('bp-button-icon[shape="close"]');
  const clearForm = document.querySelector('bp-button');
  clearInput.addEventListener('click', () => input.reset());
  clearForm.addEventListener('click', () => form.reset());
</script>
<form bp-layout="block gap:md">
  <bp-field validate>
    <label>pattern</label>
    <bp-input type="text" value="012 345 6789" pattern="[0-9]{3} [0-9]{3} [0-9]{4}">
      <bp-button-icon type="button" shape="close" action="flat" slot="suffix" aria-label="clear"></bp-button-icon>
    </bp-input>
    <bp-field-message error="patternMismatch">pattern mismatch</bp-field-message>
  </bp-field>
  <bp-field validate>
    <label>required</label>
    <bp-input type="text" required></bp-input>
    <bp-field-message error="valueMissing">value missing</bp-field-message>
  </bp-field>
  <bp-field validate>
    <label>min/max</label>
    <bp-input type="number" min="1" max="10" value="5"></bp-input>
    <bp-field-message error="tooShort">too short</bp-field-message>
    <bp-field-message error="tooLong">too long</bp-field-message>
  </bp-field>
  <bp-button type="button">reset</bp-button>
</form>

Install

NPM

// npm package
import '@blueprintui/components/include/forms.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/forms.js/+esm';
</script>

bp-fieldset

Properties

Name	Types	Description
`responsive`	`boolean`
`layout`	`FormLayout`	determine field layout

Attributes

Name	Types	Description
`responsive`	`boolean`
`layout`	`FormLayout`	determine field layout

Slots

Name	Types	Description
`default`

bp-field

Properties

Name	Types	Description
`layout`	`ControlLayout`
`controlWidth`	`'shrink'`
`inputControl`

Attributes

Name	Types	Description
`layout`	`ControlLayout`
`control-width`	`'shrink'`

CSS Properties

Name	Types	Description
`--background`

Slots

Name	Types	Description
`default`

bp-field-message

Properties

Name	Types	Description
`status`	`'error' \| 'success'`	Set the status of field message validation
`error`	`keyof ValidityState`	HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

Attributes

Name	Types	Description
`status`	`'error' \| 'success'`	Set the status of field message validation
`error`	`keyof ValidityState`	HTML5 ValidityState https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

CSS Properties

Name	Types	Description
`--color`
`--font-size`
`--font-weight`
`--max-width`
`--min-width`

Slots

Name	Types	Description
`default`		For projecting helper message text