rc-form-validation

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

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

mixins

Validation.FieldMixin

provide the following methods:

setField

sync individual field which does not need validation

handleValidate

used as value for onValidate props of Validation

Development

npm install
npm start

Example

http://localhost:8010/examples/

online example: http://react-component.github.io/form-validation/examples/

Test Case

http://localhost:8010/tests/runner.html?coverage

Coverage

http://localhost:8010/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8010/tests/runner.html?coverage

License

rc-form-validation is released under the MIT license.