react-form-input-validation

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-validation

Using yarn as your package manager.

  yarn add react-form-input-validation

Usage

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