Painless React Form Validator
Predator is a React Higher Order Component to validate form with basic validator. Predator is inspired by Laravel Validation
Install
Predator is available at npm
$ npm install --save predatorjs
or
$ yarn add predatorjs
Examples
This example is using Material-UI But don't worry Predator works with any form
import React, { Component } from 'react'
import TextField from 'material-ui/TextField'
import RaisedButton from 'material-ui/RaisedButton'
import withValidator from 'predatorjs'
class ExampleForm extends Component {
constructor(props) {
super(props)
this.state = { ... }
}
handleChange = (key, value) => {
this.setState({ form: { ...this.state.form, [key]: value } }, () =>
this.props.validate(key, value) // Validate in setState callback
)
};
handleSubmit = e => { ... };
render() {
const {
validate,
getErrorMessage,
formIsValid
} = this.props
const { form } = this.state
return (
<form onSubmit={e => this.handleSubmit(e)}>
<div style={{ maxWidth: 450, margin: '0 auto' }}>
<h3 style={{ fontFamily: 'Helvetica' }}>Predator Example</h3>
<div>
<TextField
hintText="Username"
floatingLabelText="Username"
fullWidth={true}
value={form.username}
onChange={({ target }) => this.handleChange('username', target.value)}
errorText={getErrorMessage('username')}
/>
</div>
<div>
<TextField
name="fullname"
hintText="Full Name"
floatingLabelText="Full Name"
fullWidth={true}
value={form.fullname}
onChange={({ target }) => this.handleChange('fullname', target.value)}
errorText={getErrorMessage('fullname')}
/>
</div>
... // other form components
<div>
<RaisedButton
type="submit"
label="Save"
primary={true}
disabled={!formIsValid}
/>
</div>
</div>
</form>
)
}
}
/*
* formRules is required
*/
const formRules = {
username: 'required|alphanumeric|min:6|max:12',
fullname: 'required',
email: 'required|email',
phone: 'num'
}
/*
* Form messages is optional
* Automaticaly use default messages
* if formMessages is not provided
*/
const formMessages = {
required: 'Telolet! {form} can not be empty!',
email: 'This {form} is not a valid email!',
num: '{form} only accept number.'
}
export default withValidator(formRules, formMessages)(ExampleForm)
API
Props
validate(key, value)
Validating a form based on key. Key must be unique and also must be exist in formRules
onInitValidate('#formID')
Validating form on initialize. This method aims to validate form defaultValue. You may not need to use this method, this method usually used on form which has default value (Eg: Edit form).
If you need to use this method, you have to put this method in componentDidMount
lifecycle.
And don't forget to add selector to your form.
componentDidMount() {
this.props.onInitValidate('#yourEditForm')
}
render() {
return (
<form id="yourEditForm">
...
</form>
)
}
formIsValid
Return true if all required form has been filled and no errors found.
getErrorMessage(key)
Return String
.
Get error message based on form key.
getErrorMessages()
Return Array
Return array of error messages contains form name and their error message.
Message format :
[
{
name: '',
message: ''
}
]
HOC
withValidator(formRules, [, formMessage])
Higher order component that return all props which have been mentioned above. First parameter is form rules. Form rules must be an object. For instances:
const formRules = {
username: 'required|alphanumeric|min:6|max:12',
fullname: 'required',
email: 'required|email',
phone: 'num'
}
Second parameter is optional, Predator will use default messages if this parameter is not provided. Error message example:
const formMessages = {
required: 'Telolet! {form} can not be empty!',
email: 'This {form} is not a valid email!',
num: '{form} only accept number.',
min: '{form} min length is {value} characters.',
max: '{form} max length is {value} characters.'
}
Available Rules
These are available rules for a while. Feel free to add another rule by submitting PR
Rules | Description |
---|---|
required |
Form can not be empty |
email |
Validating Email |
url |
Validating URL |
bool |
Validating Bool |
ip |
Validating IP |
date |
Validating Date |
alpha |
Only accept alphabet |
num |
Only accept number |
alphanumeric |
Only accept alphabet & number |
min |
Minimal character |
max |
Maximal character |
Todo
- Add another advance rules
- Add test case
License
MIT