Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ReactFormInputValidation

Index

Constructors

Events

Methods

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

onformsubmit: ReactFormSubmitEventHandler

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