Solid Former

Form validation for SolidJS

Online Demo

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 |

Contributions

Always welcome to people who can improve or add something useful