Form Component including validation for React
Table of Contents
To install just run the following command:
> npm install react-forms-component
import ReactForm from 'react-forms-component';
import ReactFormValidations from 'react-forms-component/validations';
<ReactForm></ReactForm>
Paramater | Type | Remark |
---|---|---|
classNameError |
string | Will apply the className when an input field is not valid |
styleError |
object | Will apply these inline styles when an input field is not valid |
onValidationChange |
func | Will be fired when the overall form validation status changes |
Validation | Parameters |
---|---|
Required |
No extra parameters |
IsNumber |
No extra parameters |
MinLength |
Length size: Number |
MaxLength |
Length size: Number |
Min |
Length size: Number |
Max |
Length size: Number |
To following example is using 2 of the above built-in validation functions:
<input
type="text"
data-model="username"
data-validations={
[
ReactFormValidations.Required,
(m, v) => ReactFormValidations.MinLength(m, v, 5)
]
} />
If the above built-in validations are not enough for your application, you can create your own Validation functions. Below is an example of a custom validation:
static Max = (modelName, value, no, customError) => (value && parseInt(value) <= no ? true : ReactFormValidations._createErrorMessage(customError, modelName, `greater than ${no}`));
To display the error message inline you can need to use data-error-for
attribute/prop:
<div className="error-label" data-error-for="username"></div>
The following is an example of how to use this library in your application:
<ReactForm
classNameError="error"
onValidationChange={this.handleValidationChange}
ref={(form) => {
this.form = form;
}}
>
<div className="form-control">
<div className="error-label" data-error-for="username"></div>
<label>Username:</label>
<input
type="text"
data-model="username"
data-validations={
[
ReactFormValidations.Required,
(m, v) => ReactFormValidations.MinLength(m, v, 5)
]
} />
</div>
...
</ReactForm>
<div className="form-control">
<label></label>
<button disabled={!isValid} onClick={this._handleClick}>Populate Model</button>
</div>
handleValidationChange = (isValid) => {
this.setState({
isValid,
});
}
_handleClick = () => {
console.log(this.form.getModel());
}
Clone this project and run the following commands to run the demo:
cd examples
npm install
npm start
then open http://localhost:4001 in a web browser
React: http://facebook.github.io/react/
Babel: http://babeljs.io/
Webpack: https://webpack.github.io/docs/