Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ReactFormInputValidation

Index

Constructors

constructor

  • Construct the React Form Input Validator instance.

    example
    
    import ReactFormInputValidation from "react-form-input-validation";
    // Recommanded to do this in constructor or componentDidMount of the form component.
    this.form = new ReactFormInputValidation(this, { locale: 'en' });

    Parameters

    Returns ReactFormInputValidation

Events

onformsubmit

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

addEventListener

  • addEventListener(event: string, callback: function): this
  • Used to subscribe the event.

    see

    Example in Code Sandbox.

    Parameters

    • event: string

      Name of the event.

    • callback: function

      Event listener for the corresponding event

        • (...args: Array<any>): void
        • Parameters

          • Rest ...args: Array<any>

          Returns void

    Returns this

handleBlurEvent

  • handleBlurEvent(event: FocusEvent<HTMLInputElement>): void
  • 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>

    Returns void

handleChangeEvent

  • handleChangeEvent(event: ChangeEvent<HTMLInputElement>): 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

handleSubmit

  • handleSubmit(event: FormEvent): 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

    Returns void

removeEventListener

  • removeEventListener(event: string, callback: function): this
  • Used to unsubscribe the event.

    see

    Example in Code Sandbox.

    Parameters

    • event: string

      Name of the event to unsubscribe.

    • callback: function

      Exact event listener needs to be passed which is used to subscribe.

        • (...args: Array<any>): void
        • Parameters

          • Rest ...args: Array<any>

          Returns void

    Returns this

useRules

  • useRules(rules: any): 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

Static getDefaultLang

  • getDefaultLang(): string

Static getMessages

  • getMessages(name: string): object
  • Get the raw object of messages for the given language.

    example
    
    ReactFormInputValidation.getMessages('lang_code');
    see

    Example in Code Sandbox.

    Parameters

    • name: string

      The name of the rule.

    Returns object

Static register

  • register(name: string, callbackFn: Function, errorMessage: string): void
  • 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: Function

      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

Static registerAsync

  • registerAsync(name: string, callbackFn: Function): 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="email"
         onChange={this.form.handleChangeEvent}
         onBlur={this.form.handleBlurEvent}
         value={this.state.fields.email}
         data-async
    >
    see

    Example in Code Sandbox.

    Parameters

    • name: string

      The name of the rule.

    • callbackFn: Function

    Returns void

Static setAttributeFormatter

  • setAttributeFormatter(callbackFn: Function): 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

Static setMessages

  • setMessages(name: string, values: object): void
  • You can also add your own custom language by calling setMessages.

    example
    
    ReactFormInputValidation.setMessages('lang_code', {
     required: 'The :attribute field is required.'
    });
    see

    Example in Code Sandbox.

    Parameters

    • name: string

      The name of the rule.

    • values: object

      A error messages object.

    Returns void

Static useLang

  • useLang(locale: string): void