react-form-input-validation

    2.0.5 • Public • Published

    React Form Input Validation

    npm package Build Status GitHub license Join the chat at https://gitter.im/react-form-input-validation/community

    A customized validatorjs library to validate the react forms. It uses the Controlled Components approach for validation.

    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.

    Install

    npm i react-form-input-validation

    DownloadsWeekly Downloads

    314

    Version

    2.0.5

    License

    GPLv3

    Unpacked Size

    66.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar