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

Shows form validation with error messages for all HTML5 validation types.

code

<form id="validation-form" bp-layout="block gap:md">
  <bp-field>
    <label>required (valueMissing)</label>
    <bp-input id="testing" type="text" required></bp-input>
    <bp-field-message error="valueMissing">This field is required</bp-field-message>
  </bp-field>

  <bp-field>
    <label>pattern (patternMismatch)</label>
    <bp-input type="text" value="012 345 678" 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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>
  <bp-button type="submit">submit</bp-button>
</form>

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

  const form = document.querySelector('#validation-form');
  const clearForm = document.querySelector('bp-button[type="button"]');
  const submitForm = document.querySelector('bp-button[type="submit"]');

  clearForm.addEventListener('click', () => form.reset());

  // 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('');
    }
  });

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('submit', Object.fromEntries(new FormData(form)));
  });
</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