README
React Form Input Validation
A customized validatorjs library to validate the react forms. It uses the Controlled Components approach for validation.
- Available Rules
- Documentation
- Demo (in CodeSandbox)
Why use react-form-input-validation?
- 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.
- Handy to manage multiple forms in same page.
Installation
To install the stable version:
Using npm as your package manager.
npm install --save react-form-input-validation
Using yarn as your package manager.
yarn add react-form-input-validation
Usage
A 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>)
}
}
Custom attribute name
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.".
Supported form fields
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.
Versions
Latest Version: 2.0.5. For more versions refer VERSIONS.md.
Changelog
Recently Updated? Please read the changelog.
License
This project is licensed under the GPLv3 License - see the LICENSE.md file for details.