rc-form-validation

rc-form-validation

FormValidation For React.
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !gemnasium depsgemnasium-imagegemnasium-url !node versionnode-imagenode-url !npm downloaddownload-imagedownload-url

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

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>onValidate</td>
      <td>Function</td>
      <td></td>
      <td>called when validator inside it starts to validate</td>
    </tr>
</tbody>

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

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>rules</td>
      <td>Object|Array</td>
      <td></td>
      <td>see https://github.com/yiminghe/async-validator .
      for example: {type:'string',min:4},[{type:'string',whitespace:true,required:true},{validator:validateFn}] </td>
    </tr>
    <tr>
      <td>trigger</td>
      <td>String</td>
      <td>onChange</td>
      <td>when to validate</td>
    </tr>
</tbody>

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/nodemodules/rc-server/nodemodules/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.