Form
Provides a basic way to validate your form and show feedback to your users with native HTML5 form validation. Use attributes such as pattern to add other validation rules.
novalidate must be present on form to handle validation with JavaScript.
INFO
Compatible with any reactive framework, but updates will not propagate to the virtual DOM.
For advance form of validation use VeeValidate, React Hook Form or others.
Installation
Follow instructions for individual framework usage below
Usage
<form class="x-form grid grid-cols-12 gap-4" novalidate>
<div class="x-field col-span-4">
<label class="x-label" for="given-name">First name</label>
<div class="x-control">
<input id="given-name" name="given-name" autocomplete="given-name" required>
</div>
</div>
<div class="x-field col-span-4">
<label class="x-label" for="family-name">Last name</label>
<div class="x-control">
<input id="family-name" name="family-name" autocomplete="family-name" required>
</div>
</div>
<div class="x-field col-span-4">
<label class="x-label" for="email">Email</label>
<div class="x-control">
<input type="email" id="email" name="email" autocomplete="email" required>
</div>
</div>
<div class="x-field col-span-4 items-start">
<button class="x-button" type="submit">Submit</button>
</div>
</form>
<svg class="hidden">
<symbol id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</symbol>
</svg><script type="module">
import { validateForm } from 'winduum/src/components/form'
document.querySelector('form').addEventListener('submit', event => {
validateForm(event)
})
</script>Examples
Form
<form class="x-form grid grid-cols-12 gap-4" novalidate>
<div class="x-field col-span-4">
<label class="x-label" for="given-name">First name</label>
<div class="x-control">
<input id="given-name" name="given-name" autocomplete="given-name" required>
</div>
</div>
<div class="x-field col-span-4">
<label class="x-label" for="family-name">Last name</label>
<div class="x-control">
<input id="family-name" name="family-name" autocomplete="family-name" required>
</div>
</div>
<div class="x-field col-span-4">
<label class="x-label" for="email">Email</label>
<div class="x-control">
<input type="email" id="email" name="email" autocomplete="email" required>
</div>
</div>
<div class="x-field col-span-4 items-start">
<button class="x-button" type="submit">Submit</button>
</div>
</form>
<svg class="hidden">
<symbol id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</symbol>
</svg><script type="module">
import { validateForm } from 'winduum/src/components/form'
document.querySelector('form').addEventListener('submit', event => {
validateForm(event)
})
</script>Field
<div class="x-field">
<label class="x-label" for="given-name">First name</label>
<div class="x-control">
<input id="given-name" name="given-name" autocomplete="given-name" required>
</div>
</div>
<svg class="hidden">
<symbol id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</symbol>
</svg><script type="module">
import { validateField } from 'winduum/src/components/form'
document.querySelector('.x-control').addEventListener('input', ({ currentTarget }) => {
validateField(currentTarget)
})
</script>Javascript API
validateForm
- Type:
(event: Event | SubmitEvent, options?: ValidateFormOptions) => void - Kind:
sync
Validates a form with checkValidity and validateField events.
ValidateFormOptions
validateSelectors
- Type:
string - Default:
.x-control, .x-check, .x-switch, .x-rating, .x-color
Selectors which will be validated.
validateOptions
- Type:
ValidateFieldOptions - Default:
{}
Additional options for validateField
submitterLoadingAttribute
- Type:
string - Default:
data-loading
Loading class that will be added to a submitter element, e.g., A button.
scrollOptions
- Type:
ScrollIntoViewOptions - Default:
{ behavior: 'smooth', block: 'center' }
Scroll options when scrolling to an invalid element.
validateField
- Type:
(selector: HTMLElement, options?: ValidateFieldOptions) => void - Kind:
sync
Validates a field. This can be element such as .x-control, x-check and others that can be validated. It adds validation info message inside c-field and validation icon inside x-control. It also adds a valid, invalid or active class to the element.
ValidateFieldOptions
validate
- Type:
boolean - Default:
true
Only active class is added if the element value is not empty. No other validation is done.
selector
- Type:
string - Default:
input:not([type="hidden"]), textarea, select
ignoreMatch
- Type:
RegExp - Default:
/(data-novalidate|readonly)/
Ignores a validation if any of these strings are present in the HTML.
validitySelector
- Type:
string - Default:
.validity
Selector for dynamically added content in the DOM such us info message or icon.
infoParentSelector
- Type:
string - Default:
.x-field
infoSelector
- Type:
string - Default:
.x-info
infoContent
- Type:
string - Default:
<div class="x-info text-error validity"></div>
endParentSelector
- Type:
string - Default:
.x-control
endSelector
- Type:
string - Default:
.ms-auto
endContent
- Type:
string - Default:
<div class="ms-auto"></div>
validAttribute
- Type:
string - Default:
data-valid
validIcon
- Type:
string | null - Default:
null
invalidAttribute
- Type:
string - Default:
data-invalid
invalidIcon
- Type:
string - Default:
<svg class="text-error validity" aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>
activeAttribute
- Type:
string - Default:
data-active