redux-form-validation
Installation
npm install --save redux-form-validation
How to use
adds a helper to display and validate fields for redux-form
builtin validation can be found in /src/basic-validation.js
How to add your validation:
; FormMessages
to make async validation you can return a promise in your validation function
NOTE: all the validations are indexed by the key, if you add a require
validation it will overwrite the validation used before
The validation function can return a message
or true
if the field is invalid
If the field is valid the validation function must return false
How to display error messages in form
Component Props:
tagName
: Specify element type to render as message list container (default isdiv
)errorCount
: Specify how many errors to be displayed at once (default-1
= all)Meta
: Theredux-form
Meta (or for other uses a object with {touch, error})
example for how to use validator:
; ; ; ; ; const sleep = const validations = email: validateOnBlur: true required: true minLength: 5 email: true { return } retryEmail: validateOnBlur: true required: true matchField: 'email' name: required: true subject: required: true minLength: 5 message: required: true minLength: 10 ; const submit = { console; }; @ @ // probably you will want to use different messages for different fields but for the demo this is good enough { return <div> <label>label</label> <div> <input ...input placeholder=label type=type /> <FormMessages tagName="ul" meta=meta> <li when="promise"> meta && metaerror && metaerrorpromise </li> <li when="matchField"> the retry email must be the same as the email </li> <li when="required"> this field is required </li> <li when="email"> please insert a valid email </li> <li when="minLength"> this field must have at least 5 characters </li> </FormMessages> </div> </div> ; } { const handleSubmit submitting valid pristine asyncValidating = thisprops; console; var submitLabel = "Send"; if pristine submitLabel = "Fill in your message"; else if asyncValidating submitLabel = "Validating..."; else if submitting submitLabel = "Sending..."; else if !valid submitLabel = "Please fill all fields correctly"; return <form onSubmit=> <Field name="email" type="email" component=thisrenderField label="Username (test@example.com is taken)" /> <Field name="retryEmail" type="email" component=thisrenderField label="Retry email" /> <Field name="name" type="text" component=thisrenderField label="Username" /> <Field name="subject" type="text" component=thisrenderField label="Subject" /> <Field name="message" type="text" component=thisrenderField label="Message" /> <button onClick=> submitLabel </button> </form> ; }
Without ES2015
var temp = ;YourComponent
Examples:
to run the example project you need to clone the repo and run npm i -d && npm start