Skip to content

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.

View SourceΒ 

Usage ​

html
<form class="c-form grid grid-cols-12 gap-4" novalidate>
    <div class="c-field col-span-4">
        <label class="ui-label" for="given-name">First name</label>
        <div class="ui-control">
            <input id="given-name" name="given-name" autocomplete="given-name" required>
        </div>
    </div>
    <div class="c-field col-span-4">
        <label class="ui-label" for="family-name">Last name</label>
        <div class="ui-control">
            <input id="family-name" name="family-name" autocomplete="family-name" required>
        </div>
    </div>
    <div class="c-field col-span-4">
        <label class="ui-label" for="email">Email</label>
        <div class="ui-control">
            <input type="email" id="email" name="email" autocomplete="email" required>
        </div>
    </div>
    <div class="c-field col-span-4 items-start">
        <button class="ui-btn" 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>
liquid
<script type="module">
    import { validateForm } from 'winduum/src/components/form'

    document.querySelector('form').addEventListener('submit', event => {
        validateForm(event)
    })
</script>

Examples ​

Form ​

html
<form class="c-form grid grid-cols-12 gap-4" novalidate>
    <div class="c-field col-span-4">
        <label class="ui-label" for="given-name">First name</label>
        <div class="ui-control">
            <input id="given-name" name="given-name" autocomplete="given-name" required>
        </div>
    </div>
    <div class="c-field col-span-4">
        <label class="ui-label" for="family-name">Last name</label>
        <div class="ui-control">
            <input id="family-name" name="family-name" autocomplete="family-name" required>
        </div>
    </div>
    <div class="c-field col-span-4">
        <label class="ui-label" for="email">Email</label>
        <div class="ui-control">
            <input type="email" id="email" name="email" autocomplete="email" required>
        </div>
    </div>
    <div class="c-field col-span-4 items-start">
        <button class="ui-btn" 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>
liquid
<script type="module">
    import { validateForm } from 'winduum/src/components/form'

    document.querySelector('form').addEventListener('submit', event => {
        validateForm(event)
    })
</script>

Field ​

html
<div class="c-field">
    <label class="ui-label" for="given-name">First name</label>
    <div class="ui-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>
liquid
<script type="module">
    import { validateField } from 'winduum/src/components/form'

    document.querySelector('.ui-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: .ui-control, .ui-check, .ui-switch, .ui-rating, .ui-color

Selectors which will be validated.


validateOptions ​
  • Type: ValidateFieldOptions
  • Default: {}

Additional options for validateField


submitterLoadingClass ​
  • Type: string
  • Default: loading

Loading class that will be added to submitter element, eg. a button.


validateField ​

  • Type: (selector: HTMLElement, options?: ValidateFieldOptions) => void
  • Kind: sync

Validates a field. This can be element such as .ui-control, ui-check and others that can be validated. It adds validation info message inside c-field and validation icon inside ui-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: .c-field

infoSelector ​
  • Type: string
  • Default: .ui-info

infoContent ​
  • Type: string
  • Default: <div class="ui-info text-error validity"></div>

endParentSelector ​
  • Type: string
  • Default: .ui-control

endSelector ​
  • Type: string
  • Default: .ms-auto

endContent ​
  • Type: string
  • Default: <div class="ms-auto"></div>

validClass ​
  • Type: string
  • Default: valid

validIcon ​
  • Type: string | null
  • Default: null

invalidClass ​
  • Type: string
  • Default: invalid

invalidIcon ​
  • Type: string
  • Default: <svg class="text-error validity" aria-hidden="true"><use href="#icon-exclamation-circle"></use></svg>

activeClass ​
  • Type: string
  • Default: active

Released under the MIT License.