Form Validation

npm1.8.3

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

pattern

pattern mismatch

required

value missing

min/max

too short

too long

code

<script type="module">
  import '@blueprintui/components/include/input.js';
</script>
<div 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-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>
</div>

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`
`layoutChange`

Attributes

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

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