Hierarchy

  • EventTarget
    • ReactFormInputValidation

Constructors

Events

Event registered to notify the form submission in ReactFormInputValidation. After successfull validation it will emit the valid data.

Returns

A callback function ReactFormSubmitEventHandler.

Example


// Refer "ReactFormInputValidation Interface" for react form input validator object creation

this.form.addEventListener("formsubmit", (fields) => {
// Make your ajax calls here.
});
// or
this.form.onformsubmit = (fields) => {
// Make your ajax calls here.
}

See

Example in Code Sandbox.

Methods

  • A method to handle the onblur event for input in the form.

    Example


    // Refer "ReactFormInputValidation Interface" for react form input validator object creation
    <input
    type="text"
    name="email"
    value={this.state.fields.email}
    onChange={this.form.handleChangeEvent}
    onBlur={this.form.handleBlurEvent}
    >

    Parameters

    • event: FocusEvent<HTMLInputElement, Element>

    Returns void

  • Handle onchange event for input fields.

    Example


    // Refer "ReactFormInputValidation Interface" for react form input validator object creation

    <input
    type="text"
    name="email"
    onChange={this.form.handleChangeEvent}
    value={this.state.fields.email}
    >

    Parameters

    • event: ChangeEvent<HTMLInputElement>

    Returns void

  • A method to handle the react form submission.

    Example


    // Refer "ReactFormInputValidation Interface" for react form input validator object creation
    <form onSubmit={this.form.handleSubmit}>
    </form>

    Parameters

    • event: FormEvent<Element>

    Returns void

  • Set the validation rules for form fields. Find the available rules here.

    Example


    this.form.useRules({
    email: "required|email",
    password: "required"
    });

    Parameters

    • rules: any

      The rules to validate.

    Returns void

  • Get the raw object of messages for the given language.

    Example


    import ReactFormInputValidation, { Lang } from "react-form-input-validation";
    ReactFormInputValidation.getMessages(Lang.en); (i.e) 'en'

    See

    Example in Code Sandbox.

    Parameters

    • langCode: Lang

      Retrive Lang code validation error messages.

    Returns object

  • Register Custom Validation Rules.

    Example


    ReactFormInputValidation.register('telephone', function(value, requirement, attribute) {
    return value.match(/^\d{3}-\d{3}-\d{4}$/);
    }, 'The :attribute phone number is not in the format XXX-XXX-XXXX.');

    See

    Example in Code Sandbox

    Parameters

    • name: string

      The name of the rule.

    • callbackFn: RegisterCallback

      Returns a boolean to represent a successful or failed validation.

    • errorMessage: string

      An optional string where you can specify a custom error message. :attribute inside errorMessage will be replaced with the attribute name.

    Returns void

  • Register an asynchronous rule which accepts a passes callback. The data-async custom attribute should be added in the html element.

    Example


    ReactFormInputValidation.registerAsync('username_available', function(username, attribute, req, passes) {
    // do your database/api checks here etc
    // then call the `passes` method where appropriate:
    passes(); // if username is available
    passes(false, 'Username has already been taken.'); // if username is not available
    });
    <input
    type="text"
    name="customer_name"
    onChange={this.form.handleChangeEvent}
    onBlur={this.form.handleBlurEvent}
    value={this.state.fields.customer_name}
    data-async
    >

    See

    Example in Code Sandbox.

    Parameters

    • name: string

      The name of the rule.

    • callbackFn: RegisterAsyncCallback
    • errorMessage: string

      An optional string where you can specify a custom error message. :attribute inside errorMessage will be replaced with the attribute name.

    Returns void

  • You can supply global custom attribute names in your app with the attributes property.

    Example


    ReactFormInputValidation.setAttributeFormatter(function(attribute) {
    return attribute.replace(/_/g, ' ');
    });

    See

    Example in Code Sandbox.

    Parameters

    • callbackFn: Function

      A Callback function to configure the attribute name.

    Returns void

  • You can also add your own custom language by calling setMessages.

    Example


    import ReactFormInputValidation, { Lang } from "react-form-input-validation";

    ReactFormInputValidation.setMessages(Lang.en, {
    required: 'The :attribute can't be empty.'
    });

    See

    Example in Code Sandbox.

    Parameters

    • langCode: Lang

      Override Lang code validation error messages.

    • values: object

      A error messages object.

    Returns void