rc-form-validation

FormValidation For React.

Feature

support ie8,ie8+,chrome,firefox,safari

install

Usage

var Validation = require('../');
var Validator = Validation.Validator;
React.render(<Validation ref='validation' onValidate={this.onValidate}>
        <Validator ref='validator' rules={[{type: 'string', min: 5, max: 10}, {validator: validateInput}]}>
          <input name="name" value={state.formData.name.value} ref="input" onChange={this.onInputChange}/>
        </Validator>
        <Validator rules={[{type: 'string', required:true, whitespace:true}]}>
          <input name="pass" value={state.formData.pass.value}/>
        </Validator>
      {state.formData.name.errors && state.formData.name.errors.length ? <div ref='error'>{state.formData.name.errors.join(',')}</div> : null}
        {state.formData.pass.errors && state.formData.pass.errors.length ? <div ref='error2'>{state.formData.pass.errors.join(',')}</div> : null}
      </Validation>,container);

API

Validation

props

name	type	default	description
onValidate	Function		called when validator inside it starts to validate

methods

validate(callback:function): validate all fields, call callback with isValid as parameter
reset: reset validation to initial state, used for form reset
forceValidate(fields:String[],callback:Function): validate specified fields, call callback with isValid as parameter. fields is component's name which is wrapped by Validator

Validator

Validator 's children must be one component which support trigger handler and value/name prop such as <input />

props

name	type	default	description
rules	Object\|Array		see https://github.com/yiminghe/async-validator . for example: {type:'string',min:4},[{type:'string',whitespace:true,required:true},{validator:validateFn}]
trigger	String	onChange	when to validate