react-component / Form Validation
This project is deprecated, you can try https://github.com/react-component/form
Stars: ✭ 85
Programming Languages
javascript
184084 projects - #8 most used programming language
rc-form-validation
FormValidation For React.
This project is obseleted, you can try rc-form.
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
License
rc-form-validation is released under the MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].