/React-form-validator

A React Form Validator. The same API as jQuery.validator

Primary LanguageJavaScriptMIT LicenseMIT

React-form-validator

A React Form Validator. The same API as jQuery.validator

Usage: Set the ref of the form to be validated as :

ref="vForm"

then pass down the props:

  • rules
  • messages

And you are all set to go!

CAUTION: You will need to pass the submit event handler from the original Form to this ValidateableForm!

Default rules ar in the

defaultRules

example:

<ValidateableForm  
    onSubmit={this.console}
    rules={{
        input1: {
            required: true,
            numbers: true,
            minLength: 6
        },
        input2: {
            required: true,
            maxLength: 6
        },
        input3: {
            required: true,
            awesome (value){
                return value === 'awesome';
            }
        }}}>
    <form ref="vForm">
        <label>Please input Numbers!</label>
        <input type="text" name="input1"/>
        <br/>
        <label>Please input a Chinese IdCard Number!</label>
        <input type="text" name="input2"/>
        <br/>
        <label>Please awesome!</label>
        <input type="text" name="input3"/>
        <br/>
        <input type="submit"/>
    </form>
</ValidateableForm>

You may see the demo in the demo.html

Update 0.0.11:

  • You may now pass a function into your rules, which receive value and return true or false to validate your form.
  • You may now use default rules : maxLength, minLength.
  • Some default messages updated.

Update 0.0.14:

You may use either

const ValidateableForm = require('react-form-validate');

or

import ValidateableForm from 'react-form-validate';

now.

Update 1.0.1:

Fixed the most important bug: the export failure.

First time publishing something on npm... Sorry about my carelessness.

You can really and truly import and use this component now

Update 1.0.2:

Fixed bugs under FireFox.