React Form decorator and validator inspired by jquery validate.
npm install react-redux-simple-validate 
React Redux Form validator inspired by jquery validate
https://github.com/ikanedo/react-redux-simple-validate
% npm install react react-dom redux react-redux
% npm install react-redux-simple-validate
``js
export default class BasicForm extends Component {
constructor() {
super();
this.validation = {
rules: {
exampleInput: {
required: true
}
},
messages: {
exampleInput: {
required: 'This is required'
}
}
};
this.handleValidForm = this.handleValidForm.bind(this);
}
handleValidForm(data) {
console.log('hand your data here!', data);
}
render() {
return (
handleValidForm={this.handleValidForm}
validation={this.validation}
>
`
| Method | Type | Description |
|-------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| handleInvalidForm | Function | Method to call if validation is unsuccessful |
| defaultValues | Object | Use this param for seeding initial data from the server NOTE: This is not reactive! If you want to change the values programmatically, then dispatch an action (FORM_DATA_REPLACE or FORM_DATA_MERGE). |
| defaultErrors | Object | Use this param for seeding initial error messages from the server NOTE: This is not reactive! If you want to change the errors programmatically, then dispatch an action (FORM_DATA_REPLACE or FORM_DATA_MERGE). |
| Action Name | Description |
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| FORM_DATA_REPLACE | Replaces the state with the given params(values/errors) |
| FORM_INPUT_CHANGE | Replaces the value of a given input name |
| FORM_DATA_MERGE | Merges the current state with the given params(values/errors) |
| FORM_RESET | Sets values and errors to be empty. NOTE: If you give the form element a defaultValue, it will be reverted back to that value on reset. If you want to 'clean' the form, then you will need to set the value to an empty string. |
| FORM_TRIGGER_VALIDATION | Programmatically validate a given form name |
`js
const validation = {
rules: {
exampleInput: {
required: true,
minlength: 2,
maxlength: 255,
equalTo: '[name=password]',
pattern: "^[A-Za-z0-9._'%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$|^$"
}
},
messages: {
exampleInput: {
required: 'This is required',
minlength: 'Too short',
maxlength: 'Too long',
equalTo: 'Passwords are not the same',
pattern: 'Email address format is invalid'
}
}
}
``
Other built in rules can be found in the validate.js website
See the documentation for FormGroups if you want to build more complex forms.
See all FAQs.
1. How do I create a custom input component?
1. How do I change an input value programmatically?
1. How do I ADD validation errors programmatically?
1. How do I REMOVE validation errors programmatically?
1. How do I change when each input field is validated?
1. How do I split my form into multiple components?
1. How do I validate some input fields but not others?
1. Why is my input value not changing?