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 Types

The following HTML5 validation types are supported:

valueMissing - Triggered when a required field is empty
patternMismatch - Triggered when input doesn't match the specified pattern
typeMismatch - Triggered when input doesn't match the expected type (e.g., email, url)
rangeOverflow - Triggered when a number exceeds the max value
rangeUnderflow - Triggered when a number is below the min value
stepMismatch - Triggered when a number doesn't match the step increment
tooShort - Triggered when text is shorter than minlength
tooLong - Triggered when text is longer than maxlength
customError - Triggered by custom validation using setCustomValidity()
badInput - Triggered when the browser cannot convert the input

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 clearForm = document.querySelector('bp-button');
  clearForm.addEventListener('click', () => form.reset());
</script>
<form bp-layout="block gap:md">
  <bp-field validate>
    <label>required (valueMissing)</label>
    <bp-input type="text" required></bp-input>
    <bp-field-message error="valueMissing">This field is required</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>pattern (patternMismatch)</label>
    <bp-input type="text" value="012 345 6789" pattern="[0-9]{3} [0-9]{3} [0-9]{4}"></bp-input>
    <bp-field-message error="patternMismatch">Must match pattern: XXX XXX XXXX</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>email (typeMismatch)</label>
    <bp-input type="email" value="invalid-email"></bp-input>
    <bp-field-message error="typeMismatch">Please enter a valid email address</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>number range overflow (rangeOverflow)</label>
    <bp-input type="number" max="10" value="15"></bp-input>
    <bp-field-message error="rangeOverflow">Value must be 10 or less</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>number range underflow (rangeUnderflow)</label>
    <bp-input type="number" min="5" value="2"></bp-input>
    <bp-field-message error="rangeUnderflow">Value must be 5 or greater</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>step mismatch (stepMismatch)</label>
    <bp-input type="number" step="5" value="3"></bp-input>
    <bp-field-message error="stepMismatch">Value must be a multiple of 5</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>minlength (tooShort)</label>
    <bp-input type="text" minlength="5" value="abc"></bp-input>
    <bp-field-message error="tooShort">Must be at least 5 characters</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>maxlength (tooLong)</label>
    <bp-input type="text" maxlength="10" value="this is way too long"></bp-input>
    <bp-field-message error="tooLong">Must be no more than 10 characters</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>custom error (customError)</label>
    <bp-input id="custom-input" type="text" value="test"></bp-input>
    <bp-field-message error="customError">Custom validation failed</bp-field-message>
  </bp-field>

  <bp-button type="button">reset</bp-button>
</form>

<script type="module">
  // Example of setting custom validation
  const customInput = document.querySelector('#custom-input');
  customInput.addEventListener('input', () => {
    if (customInput.value === 'test') {
      customInput.setCustomValidity('Cannot use "test" as value');
    } else {
      customInput.setCustomValidity('');
    }
  });
  // Trigger initial validation
  customInput.dispatchEvent(new Event('input'));
</script>

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
`layout`	`FormLayout`	determine field layout

Attributes

Name	Types	Description
`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