React Redux Form Validation

React Validation

React validation can be easily done using React Redux Validator which will help us to add validator a page with ease.

npm install react-redux
npm install redux-form

Field

Each field need to be decorated with Redux Form Field,

Mandatory fields are

• name (Name will be used to add validation)
• field (Control reference for Redux-Form control to get added into form control)
• component (Rendering the control, binding Redex references, and error notification)
• Decorated inside a form

React Field exposes input and meta object which contains, which can be used to display error messages

Input (which add's following client events)

• onBlur
• onChange
• onDragStart
• onDrop
• onFocus

Meta: (Redux Form properties)

• active
• valid
• touched
• error
• invalid
• visited
• form
• error
• dirty
• autofilled
• submitting
• submitFailed
• pristine

Custom Control decoration with Field

renderField = field =>

        <formfieldscontrol
            name="name"

            field={field.input}

<input

            {...this.props.field}

            name={this.props.name}

Input Control decoration with Field

<input
            name=
            {...field}

Redux Form

While exposing redux form ensure a unique form page name, validation method and warn message passed.

export default reduxForm({

  form: 'CustomerPage',                 // a unique identifier for this form

  validate: CustomerPageValidation,     // <--- div="" function="" given="" redux-form="" to="" validation="">

  warn: CustomerPageWarn                // <--- div="" function="" given="" redux-form="" to="" warning="">

})(CustomerPage);

Sample

https://github.com/hariram302/react-kickstart/blob/master/client/CustomerPage.js
https://github.com/hariram302/react-kickstart/