react-form-input-validation

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	☑
email	☑
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.