FormValidation For React.
This project is obseleted, you can try rc-form.
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);
name | type | default | description |
---|---|---|---|
onValidate | Function | called when validator inside it starts to validate |
Validator 's children must be one component which support trigger handler and value/name prop such as
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 |
Validation.FieldMixin
provide the following methods:
sync individual field which does not need validation
used as value for onValidate props of Validation
npm install
npm start
http://localhost:8010/examples/
online example: http://react-component.github.io/form-validation/examples/
http://localhost:8010/tests/runner.html?coverage
rc-form-validation is released under the MIT license.