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
{ superprops thisstate = ... } { this }; { ... }; { const validate getErrorMessage formIsValid } = thisprops const form = thisstate return <form onSubmit= this> <div style= maxWidth: 450 margin: '0 auto' > <h3 style= fontFamily: 'Helvetica' >Predator Example</h3> <div> <TextField hintText="Username" floatingLabelText="Username" fullWidth=true value=formusername onChange= this errorText= /> </div> <div> <TextField name="fullname" hintText="Full Name" floatingLabelText="Full Name" fullWidth=true value=formfullname onChange= this errorText= /> </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.' formRules formMessagesExampleForm
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.
{ thisprops} { 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