Solid-validated-form NPM

solid-validated-form

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

Getting Started - Example
Documentation - Tutorials

Solid Validated Form Demo GIF

Getting Started

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

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

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'))