react-form-input-validation

React Input Form Validation

A customized validatorjs library to validate the react forms.

• Supported Rules (It is supports all validatorjs 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.

Usage

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: ""
      },
      inputErrors: {}
    };
    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.inputErrors.name ? this.state.inputErrors.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.inputErrors.email ? this.state.inputErrors.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.inputErrors.phone_number ? this.state.inputErrors.phone_number.message : ""}
              </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.handleFieldsChange}
        value={this.state.fields.name}
        data-attribute-name="USER NAME"
    />

The output will be like, "The USER NAME field is required.".

License

This project is licensed under the GPLv3 License - see the LICENSE.md file for details.