A customized validatorjs library to validate the react forms. It uses the Controlled Components approach for validation.
- Supported Rules (It is supports all validatorjs rules)
- Documentation
- Demo (in CodeSandbox)
- JQuery Free.
- Auto Controlled State.
- Compatible with libraries like Material UI, and etc.
- Readable and declarative validation rules which is inspired by laravel framework.
- Error messages with multilingual support.
To install the stable version:
Using npm as your package manager.
npm install --save react-form-input-validationUsing yarn as your package manager.
yarn add react-form-input-validationA example form has given below. View all available apis in documentation.
import React from "react"; import ReactFormInputValidation from "react-form-input-validation"; class ValidationForm extends React.Component { constructor(props) { super(props); this.state = { fields: { name: "", email: "", phone_number: "" }, errors: {} }; this.form = new ReactFormInputValidation(this); this.form.useRules({ name: "required", email: "required|email", phone_number: "required|numeric|digits_between:10,12", }); this.form.onformsubmit = (fields) => { // Do you ajax calls here. } } render() { return (<React.Fragment> <form onSubmit={this.form.handleSubmit}> <p> <label> Name <input type="text" name="name" onBlur={this.form.handleBlurEvent} onChange={this.form.handleChangeEvent} value={this.state.fields.name} /> </label> <label className="error"> {this.state.errors.name ? this.state.errors.name : ""} </label> </p> <p> <label> Email <input type="email" name="email" onBlur={this.form.handleBlurEvent} onChange={this.form.handleChangeEvent} value={this.state.fields.email} /> </label> <label className="error"> {this.state.errors.email ? this.state.errors.email : ""} </label> </p> <p> <label> Phone <input type="tel" name="phone_number" onBlur={this.form.handleBlurEvent} onChange={this.form.handleChangeEvent} value={this.state.fields.phone_number} /> </label> <label className="error"> {this.state.errors.phone_number ? this.state.errors.phone_number : ""} </label> </p> <p> <button type="submit">Submit</button> </p> </form> </React.Fragment>) } }Refer the below example to override the attribute name,
<input type="text" name="name" onBlur={this.form.handleBlurEvent} onChange={this.form.handleChangeEvent} value={this.state.fields.name} data-attribute-name="Username" />The output will be like, "The Username field is required.".
| Form Fields and Attributes | Supported By Library |
|---|---|
| text | ☑ |
| password | ☑ |
| ☑ | |
| url | ☑ |
| number | ☑ |
| checkbox | ☑ |
| radio | ☑ |
| search | ☑ |
| tel | ☑ |
| date | ☑ |
| month | ☑ |
| week | ☑ |
| time | ☑ |
| datetime-local | ☑ |
| textarea | ☑ |
| select | ☑ |
| color | ☑ |
| Combo Box Fields | ☑ |
| file | ☒ |
| range | ☒ |
| image | ☒ |
The input types button, submit, reset, hidden are exceptional from the above list.
Latest Version: 2.0.0. For more versions refer VERSIONS.md.
Recently Updated? Please read the changelog.
This project is licensed under the GPLv3 License - see the LICENSE.md file for details.