All Projects → react-component → Form Validation

react-component / Form Validation

This project is deprecated, you can try https://github.com/react-component/form

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.

NPM version SPM version build status Coverage Status gemnasium deps node version npm download Sauce Test Status

Sauce Test Status

Feature

  • support ie8,ie8+,chrome,firefox,safari

install

rc-form-validation

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.

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].