v-react

This validation package can be used with react and redux.

This package will help you to update the validation error messages in redux store and you can use the validations in store to allow/reject actions in UI.

List of functions exposed by v-react

1. errorReducer - Take this reducer from v-react and use it in Redux combine reducers block. To be used with actions setErrors/saveError.
2. setValidity - Validates the field and updates the redux state based on the props supplied to it
3. setErrors - Action to set/clear the error in redux state. This error object will be removed from the redux state if the respective field passes the validation criteria.
4. saveErrors - Action to set/update the error in redux state. The "hasError" property of the error object will be set to true/false based on the validation.
5. getErrorClass - Checks the isDirty & hasError property in the state supplied to return the validation error class.
6. getErrorMessage - Checks the isDirty & hasError property in the state supplied to return the validation error message.

Sample Usage

STEP 1: npm install v-react --save

STEP 2: Update your combine reducers file as below

import { errorReducer } from 'v-react';

const rootReducer = combineReducers({
  errorReducer,
  // other reducers go here
});

export default rootReducer;

STEP 3: Pass the v-react error action to your component

import { setErrors, saveErrors } from 'v-react';

setErrors - This function will remove the validation error from the state if its hasError property is false.

saveErrors - This function will just updates the validation errors and never removes it from state

function mapDispatchToProps(dispatch) {
  return {
      errorActions: bindActionCreators({setErrors, saveErrors}, dispatch),
      // Other actions go here 
  };
}

STEP 4: [Optional] Set a local state to temporarily store the validation messages

import { setValidity } from 'v-react';

Maintain a local state in your component for all your input fields which need validation, this goes into your component constructor

(['input-field1-name', 'input-field2-name', 'input-field3-name']).forEach((str) => {
      this.state[str] = {
        isDirty: false,
        hasError: false,
        errorMessage: '',
        validationState: 'VALIDATION_NEUTRAL'
      };
    });

STEP 5: This is how you invoke the 'v-react' package to update the validations in your redux state.

Below code should go in input on change event or button click event, etc where ever you need the validation checks to be triggered.

const params = {
  group: 'validation-group-name',
  name: 'unique-validation-name',
  value: 'string/bool/number/null/undefined', // Value to be validated.
  validations: 'refer-sample-validation-object ##Ref1', // List of validations in the below specified format.
  isDirty: 'bool', // Only if you set this value to true, validations check will be performed.
  fieldName: 'input-field-name',
  state: _.cloneDeep(this.state), // Local state, only if you have followed the STEP 4,
  setError: this.props.errorActions.saveErrors (or) this.props.errorActions.setErrors // Fetch the set error function from 'v-react' and pass it on the set validity function
};

validators.setValidity(params); //##Ref2
this.setState({ ...params.state });

STEP 6: This is how your html goes in render function

const validationMessageStyle = {
    color: 'red'
},
validationInputStyle = {
    'border-color': 'red'
}

<input	name="firstName"
    style={this.state.userName.hasError ? validationInputStyle : {} }	
    type="text"
    onChange={this.onNameChange}
    className="form-control"
    value={this.props.firstName}/>
    
<span style={validationMessageStyle}>{this.state['input-field-name'].errorMessage}</span>

Redux state gets updated with the validation errors in errorReducer.

In case if you are using setErrors action, the validation errors will be removed from the errorReducer once the errors are cleared.

In case of saveErrors action, the validation errors hasError property gets updated to true/false based on the field validity.

##Ref1 Format for validations:

const validations = {
        isRequired: { 
	            value: true, 
	            message: 'error message' 
            },
        maxLength: { 
	            value: 1000, message: 'error message' },
	            minLength: { value: 10, message: 'error message' },
        custom: [
            {
                name: 'unique name'
                action: function(value) { return 'bool'; }
                message: 'error message'
            },
            {
                name: 'unique name'
                action: function(value) { return 'bool'; }
                message: 'error message'
            }
        ]
      }

##Ref2 The result of setValidity function will be in below format

{
    //other properties of state
    ['fieldName']: {
			isDirty: true,
			hasError: 'bool',
			errors: ['errormessage1', 'errormessage2'],
			errorMessage: 'All error messages combined in a single string',
			validationState: '"VALIDATION_NEUTRAL" or "VALIDATION_ERROR"',
			ignored: 'bool'
		   }
}