React Form Input Validation
A customized validatorjs library to validate the react forms. It uses the both Controlled Components and React Hooks approach for validation.
- Available Rules
- Documentation
- Demo - Class Components (in CodeSandbox)
- Demo - Functional Components (in CodeSandbox)
Why use react-form-input-validation?
- JQuery Free.
- Auto Controlled State.
- Able to use in both State and Stateless components.
- 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-validationUsing yarn as your package manager.
yarn add react-form-input-validationUsage
Class component
The given below example is for Class component. 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>)
}
}Functional Component
The given below example is for Functional component with the usage of hooks. View all available apis in documentation.
Example 1
import React from "react";
import { useFormInputValidation } from "react-form-input-validation";
const ValidationForm = () => {
const [fields, errors, form] = useFormInputValidation({
customer_name: "",
email_address: "",
phone_number: "",
}, {
customer_name: "required",
email_address: "required|email",
phone_number: "required|numeric|digits_between:10,12"
});
const onSubmit = async (event) => {
const isValid = await form.validate(event);
if (isValid) {
// console.log(fields, errors);
// Perform api call here
}
}
return <div style={{maxWidth: "600px", margin: "0 auto"}}>
<h3>React Form Input Validation - validate</h3>
<form
className="myForm"
noValidate
autoComplete="off"
onSubmit={onSubmit}
>
<p>
<label>
Name
<input
type="text"
name="customer_name"
onBlur={form.handleBlurEvent}
onChange={form.handleChangeEvent}
value={state.fields.customer_name}
/>
</label>
<label className="error">
{errors.customer_name
? errors.customer_name
: ""}
</label>
</p>
<p>
<label>
Phone
<input
type="tel"
name="phone_number"
onBlur={form.handleBlurEvent}
onChange={form.handleChangeEvent}
value={fields.phone_number}
/>
</label>
<label className="error">
{errors.phone_number
? errors.phone_number
: ""}
</label>
</p>
<p>
<label>
Email
<input
type="email"
name="email_address"
onBlur={form.handleBlurEvent}
onChange={form.handleChangeEvent}
value={fields.email_address}
/>
</label>
<label className="error">
{errors.email_address
? errors.email_address
: ""}
</label>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
</div>
}
export default ValidationForm;Example 2
import React from "react";
import { useFormInputValidation } from "react-form-input-validation";
const ValidationForm2 = () => {
const [fields, errors, form] = useFormInputValidation({
email_address: "",
password: "",
}, {
email_address: "required|email",
password: "required"
});
useEffect(() => {
if (form.isValidForm) {
// console.log(fields, errors, form);
// Perform api call here
}
}, [])
return <div style={{maxWidth: "600px", margin: "0 auto"}}>
<h3>React Form Input Validation - usage of form.isValidForm</h3>
<form
className="myForm"
noValidate
autoComplete="off"
onSubmit={form.handleSubmit}
>
<p>
<label>
Email
<input
type="email"
name="email_address"
onBlur={form.handleBlurEvent}
onChange={form.handleChangeEvent}
value={fields.email_address}
/>
</label>
<label className="error">
{errors.email_address
? errors.email_address
: ""}
</label>
</p>
<p>
<label>
Password
<input
type="tel"
name="password"
onBlur={form.handleBlurEvent}
onChange={form.handleChangeEvent}
value={fields.password}
/>
</label>
<label className="error">
{errors.password
? errors.password
: ""}
</label>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
</div>
}
export default ValidationForm2;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.
