React Input Form Validation
Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

  • ReactFormValidator

Index

Constructors

Methods

Constructors

constructor

  • Construct the React Input Form Validator instance. Find the available rules here.

    example
    let form = new ReactFormValidator(this,
                                  {
                                     email: "required|email",
                                  },
                                  (fields) => {
                                     // Make ajax request here to send data to server
                                  },
                                  {
                                     locale: 'en'
                                  })

    Parameters

    Returns ReactFormValidator

Methods

handleBlurEvent

  • handleBlurEvent(event: any): void

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

    example
    // Refer "ReactFormValidator Interface" for react input form validator object creation
<input
     name="email"
     value={this.state.fields.email}
     onChange={form.handleFieldsChange}
     onBlur={form.handleBlurEvent}
>

    Parameters

    • event: any

      onblur event

    Returns void

handleFieldsChange

  • handleFieldsChange(event: any): void

  • Handle onchange event for input fields.

    example
    // Refer "ReactFormValidator Interface" for react input form validator object creation

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

    Parameters

    • event: any

    Returns void

handleSubmit

  • handleSubmit(event: any): void

  • A method to handle the react form submission

    example
    // Refer "ReactFormValidator Interface" for react input form validator object creation

<form onSubmit={form.handleSubmit}>
</form>

    Parameters

    • event: any

      onsubmit event

    Returns void

Static getDefaultLang

  • getDefaultLang(): string

  • Get the default language being used

    example
    ReactInputFormValidator.getDefaultLang(); // returns e.g. 'en'

    Returns string

Static getMessages

  • getMessages(name: string): object

  • Get the raw object of messages for the given language

    example
    ReactInputFormValidator.getMessages('lang_code');

    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
    ReactInputFormValidator.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.');

    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 setMessages

  • setMessages(name: string, values: object): void

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

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

    Parameters

    • name: string

      The name of the rule.

    • values: object

      A error messages object

    Returns void

Static useLang

  • useLang(locale: string): void

  • Set the locale string for error messages

    example
    import ReactInputFormValidator from "react-input-form-validator";

ReactInputFormValidator.useLang("en");

    Parameters

    • locale: string

      string

    Returns void