Painless React Form Validator

Predator is a React Higher Order Component to validate form with basic validator. Predator is inspired by Laravel Validation

Install

Predator is available at npm

$ npm install --save predatorjs or $ yarn add predatorjs

Examples

This example is using Material-UI But don't worry Predator works with any form

import React, { Component } from 'react'
import TextField from 'material-ui/TextField'
import RaisedButton from 'material-ui/RaisedButton'
import withValidator from 'predatorjs'

class ExampleForm extends Component {
  constructor(props) {
    super(props)
    this.state = { ... }
  }

  handleChange = (key, value) => {
    this.setState({ form: { ...this.state.form, [key]: value } }, () =>
      this.props.validate(key, value) // Validate in setState callback
    )
  };

  handleSubmit = e => { ... };

  render() {
    const {
      validate,
      getErrorMessage,
      formIsValid
    } = this.props

    const { form } = this.state

    return (
      <form onSubmit={e => this.handleSubmit(e)}>
        <div style={{ maxWidth: 450, margin: '0 auto' }}>
          <h3 style={{ fontFamily: 'Helvetica' }}>Predator Example</h3>
          <div>
            <TextField
              hintText="Username"
              floatingLabelText="Username"
              fullWidth={true}
              value={form.username}
              onChange={({ target }) => this.handleChange('username', target.value)}
              errorText={getErrorMessage('username')}
            />
          </div>
          <div>
            <TextField
              name="fullname"
              hintText="Full Name"
              floatingLabelText="Full Name"
              fullWidth={true}
              value={form.fullname}
              onChange={({ target }) => this.handleChange('fullname', target.value)}
              errorText={getErrorMessage('fullname')}
            />
          </div>

          ... // other form components

          <div>
            <RaisedButton
              type="submit"
              label="Save"
              primary={true}
              disabled={!formIsValid}
            />
          </div>
        </div>
      </form>
    )
  }
}

/*
 * formRules is required
*/
const formRules = {
  username: 'required|alphanumeric|min:6|max:12',
  fullname: 'required',
  email: 'required|email',
  phone: 'num'
}

/*
 *  Form messages is optional
 *  Automaticaly use default messages
 *  if formMessages is not provided
*/
const formMessages = {
  required: 'Telolet! {form} can not be empty!',
  email: 'This {form} is not a valid email!',
  num: '{form} only accept number.'
}

export default withValidator(formRules, formMessages)(ExampleForm)

API

Props

validate(key, value)

Validating a form based on key. Key must be unique and also must be exist in formRules

onInitValidate('#formID')

Validating form on initialize. This method aims to validate form defaultValue. You may not need to use this method, this method usually used on form which has default value (Eg: Edit form).

If you need to use this method, you have to put this method in componentDidMount lifecycle. And don't forget to add selector to your form.

componentDidMount() {
  this.props.onInitValidate('#yourEditForm')
}

render() {
  return (
    <form id="yourEditForm">
      ...
    </form>
  )
}

formIsValid

Return true if all required form has been filled and no errors found.

getErrorMessage(key)

Return String. Get error message based on form key.

getErrorMessages()

Return Array Return array of error messages contains form name and their error message. Message format :

[
  {
    name: '',
    message: ''
  }
]

HOC

withValidator(formRules, [, formMessage])

Higher order component that return all props which have been mentioned above. First parameter is form rules. Form rules must be an object. For instances:

const formRules = {
  username: 'required|alphanumeric|min:6|max:12',
  fullname: 'required',
  email: 'required|email',
  phone: 'num'
}

Second parameter is optional, Predator will use default messages if this parameter is not provided. Error message example:

const formMessages = {
  required: 'Telolet! {form} can not be empty!',
  email: 'This {form} is not a valid email!',
  num: '{form} only accept number.',
  min: '{form} min length is {value} characters.',
  max: '{form} max length is {value} characters.'
}

Available Rules

These are available rules for a while. Feel free to add another rule by submitting PR

Rules	Description
required	Form can not be empty
email	Validating Email
url	Validating URL
bool	Validating Bool
ip	Validating IP
date	Validating Date
alpha	Only accept alphabet
num	Only accept number
alphanumeric	Only accept alphabet & number
min	Minimal character
max	Maximal character

Todo

1. Add another advance rules
2. Add test case

License

MIT