solid-validated-form

Easily create forms with client side validation for Solid. Inspired by Ember Validated Form.

NPM Version Pipeline Status Coverage Status JavaScript Style Guide

Solid Validated Form Demo GIF

Getting Started

Add solid-validated-form to your package.json.

npm install --save solid-js solid-validated-form

This package has full TypeScript support.

Example

See CodeSandbox demo.

import { render } from 'solid-js/web'
import ValidatedForm from 'solid-validated-form'

function App() {
  const F = ValidatedForm({
    firstName (value) {
      if (value.length < 3 || value.length > 40) return 'must be between 3 and 40 characters'
    },
    lastName (value) {
      if (value.length < 3 || value.length > 40) return 'must be between 3 and 40 characters'
    },
    aboutMe (value) {
      if (value.length > 200) return 'is too long (maximum is 200 characters)'
    },
    country (value) {
      if (value === '') return 'can\'t be blank'
    },
    gender (value) {
      if (value === '') return 'can\'t be blank'
    }
  })

  return (
    <F.Form>
      <F.Text name='firstName' />

      <F.Text name='lastName' />

      <F.Textarea name='aboutMe' placeholder='Optional...' />

      <F.Select name='country' options={{
        '': 'Please choose...',
        ca: 'Canada',
        us: 'United State of America',
        zz: 'Other'
      }} />

      <F.RadioList name='gender' options={{
        m: 'Male',
        f: 'Female'
      }} />

      <F.Submit label='Save' />
      <F.Reset />
    </F.Form>
  )
}

render(() => <App />, document.getElementById('app'))

Documentation

Extensive work has been done to document and test this library.

Tutorials