rodyk / react-form-validation

A simple and declarative way to validate your forms in React

React useForm Hooks

A simple and declarative way to validate your forms in React.

Example usage

Create your stateSchema

Your stateSchema is an object key value-pair contains the value of an input and the current error if any.

const stateSchema = {
  first_name: { value: '', error: '', },
  last_name: { value: '', error: '', },
  tags: { value: '', error: '',  },
};

Create a validation in your stateSchema

Property should be the same in your stateSchema in-order validation works. validator prop accepts a func that you can be used to validate your state via regex.

const stateValidatorSchema = {
  first_name: {
    required: true,
    validator: {
      func: value => /^[a-zA-Z]+$/.test(value),
      error: 'Invalid first name format.',
    },
  },
  last_name: {
    required: true,
    validator: {
      func: value => /^[a-zA-Z]+$/.test(value),
      error: 'Invalid last name format.',
    },
  },
  tags: {
    required: true,
    validator: {
      func: value => /^(,?\w{3,})+$/.test(value),
      error: 'Invalid tag format.',
    },
  },
};

Passed your stateSchema and stateValidatorSchema in useForm hooks. The 3rd parameter is (optional) a callback function to be called when you submit your form if all fields is valid.

const { 
    values, errors, handleOnChange, handleOnSubmit, disable 
  } = useForm(stateSchema, stateValidatorSchema,
  onSubmitForm
);

Demo

Working demo here

Contributing

Feel free to contribute in this project.

License

This project is under MIT License.