Solid-former NPM

Solid Former

Form validation for SolidJS

Install

npm i solid-former

Quick Start

Create form object in your component

const form = createForm({
  fields: { 
    username: '', 
    password: '', 
    isAgree: false
  },
  validators: [
    ({ username }) => username.length >= 1 || { username: 'Username is too short!' },
    
    ({ password }) => password.length >= 8 || { password: 'Password is too short!!' },
    
    ({ isAgree })  => isAgree === true || { isAgree: 'Either agree to terms or give us -$500!' },
    
    ({ password, username }) => !password.includes(username) || { password: 'Dont include username in password!' },
  ],
  onSubmit(fields) {
    console.log(fields)
  }
})

Validator has this structure

(fields) => <I expect this to be true> || <otherwise return error>

Then you can just do this

<>
  {/* Bind field to input */}
  <input 
    value={form.fields().username.value} 
    oninput={e => form.input('username', e.currentTarget.value)}
  />
  
  {/* Display error */}
  <Show when={form.fields().username.error}>
    <p>{form.fields().username.error}</p>
  </Show>
<>

Submit the form

form.submit()

Done!

Need more info? Check out live example or read about api

Api

const formInstance = createForm(formOptions)

Form options

option	description	required
`fields`	Fields of form	yes
`validators`	List of validators. A validator is a function that takes fields and validates them. It has to return either the boolean true or an error object	yes
`validateOnInput`	If true it validates on everytime when any of the fields changes. Otherwise it will validate only when submit method is called. Disabled by default	no
`stopAtFirstError`	If true it stops at first error. Otherwise it provides all errors. Enabled by default	no
`onSubmit()`	Triggered when form.submit() called and validated without errors	no
`onChange()`	Triggered when any of the fields change	no

Form instance

property/method	description
`fields()`	Represents all fields. One field has three reactive properties: name, error, value
`isValid()`	Tells whether form is valid or not
`isTouched()`	Tells if at least one of fields has been changed
`input()`	Updates one field. Takes name of field and new value
`reset()`	Resets all values to defaults
`submit()`	Submits form. Meaning validates form and calls the onSubmit after successful submit
`errorCount()`	Current error count