SandForms

SandForms makes working with forms a breeze.

Input Validation

SandForms uses Sandhands to provide advanced input validation. To read more about the validation options see the strings format in the Sandhands documentation.

Compatability

Currently SandForms only supports react, however there are plans for vanilla JS support in the future.

React

SandForms provides a Form component that will automatically detect string based input elements inside it and apply sanitation options (see the string options here) to them based on the props passed to those elements. The form accepts a callback for receiving the submit event using the onSubmit prop. You can handle errors generated by the input validation using the form or inputs onError prop

Installation

npm i -s sandforms-react

Example Usage

import {Form, Input} from 'sandforms-react'
import React from 'react'

class Login extends React.Component {
  submit({username, password}) {
    	console.log(`Got username "${username}", and password "${password}".`)
  }
  error(error){
  	console.log(`Got error "${error}"`)
  }
  render() {
    return (
      <Form onSubmit={this.submit} onError={this.error}>
      	<Input name="username" minLength={3} maxLength={25} regex={/^[a-zA_Z0-9]+$/}/>
        <Input name="password" type="password" minLength={8}/>
        <input type="submit"/>
      </Form>
    )
  }
}
export default Login