A customized validatorjs library to validate the react forms.
- 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.
A example form has given below. View all available apis in documentation.
import React from "react"; import ReactFormValidation 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 ReactFormValidation( this, { name: "required", email: "required|email", phone_number: "required|numeric|digits_between:10,12", }, (fields) => { alert(JSON.stringify(fields)); } ); } render() { return (<React.Fragment> <form onSubmit={this.form.handleSubmit}> <p> <label> Name <input type="text" name="name" onBlur={this.form.handleBlurEvent} onChange={this.form.handleFieldsChange} value={this.state.fields.name} /> </label> <label className="error"> {this.state.errors.name ? this.state.errors.name.message : ""} </label> </p> <p> <label> Email <input type="email" name="email" onBlur={this.form.handleBlurEvent} onChange={this.form.handleFieldsChange} value={this.state.fields.email} /> </label> <label className="error"> {this.state.errors.email ? this.state.errors.email.message : ""} </label> </p> <p> <label> Phone <input type="tel" name="phone_number" onBlur={this.form.handleBlurEvent} onChange={this.form.handleFieldsChange} value={this.state.fields.phone_number} /> </label> <label className="error"> {this.state.errors.phone_number ? this.state.errors.phone_number.message : ""} </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.handleFieldsChange} value={this.state.fields.name} data-attribute-name="USER NAME" />The output will be like, "The USER NAME field is required.".
This project is licensed under the GPLv3 License - see the LICENSE.md file for details.