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