formsy-react-wrapper 

Added a wrapper to formsy-react to have asynchronous validations and translations for error messages.

Install

``
npm install formsy-react-wrapper
`




How to use

To register asynchronous validator

The validator function has to return a promise.

`
import FormsyWrapper from 'formsy-react-wrapper'
import request from 'superagent'

FormsyWrapper.addAsyncValidationRule('isUniqueEmail', (value, optionalVal) => {
return new Promise((resolve, reject) => {
request
.post('/api/usercheck')
.send({email: value})
.set('Accept', 'application/json')
.end((err, res) => {
if (err || !res.ok) {
reject('check failed')
} else {
resolve('check ok')
}
})
})
})
`

It provides an input component to use with wrapped form component

`
import React, {Component} from 'react'
import FormsyWrapper from 'formsy-react-wrapper'

class App extends Component {
render () {
return (

name='email'
validations='isEmail' // react-formsy API
validationError='This is not an email!' // react-formsy API
asyncValidations='isUniqueEmail' // register asynchronous validator name here
asyncValidationErrors={{isUniqueEmail: 'Email has to be unique'}} // for failed async validation error message
required />

)
}
}
`

Error message can have translations by locale

`
validationError={{en: 'This is not an email!', zh: '非email格式'}}
asyncValidations='isUniqueEmail'
asyncValidationErrors={{isUniqueEmail: {en: 'Email has to be unique', zh: 'email必须是唯一的'}}}
locale={this.state.locale} // locale should be either en or zh
required />
`

Example

run example locally
`
npm run example

// Check http://localhost:8080/
`

Or see demo

API

formsy-react-wrapper posts the Formsy.Form API to FormsyWrapper.Form, you can use them in the same way.

onValid()

onValidSubmit()

These will be triggered only when both synchronous and asynchronous validation success


onInvalid()

onInvalidSubmit()

These will be triggered when either synchronous or asynchronous validation fails


FormsyWrapper.addAsyncValidationRule(name, func)

Adding async validation rules, the second parameter function must return a promise.
Example see how to use section.

FormsyWrapper.Form

Use this instead of Formsy.Form. Example see how to use section.

FormsyWrapper.Input

Must be used with . Example see how to use section.

To register non-async valiation

Call Formsy.addValidationRule(name, ruleFunc)` directly.

TODO

- add more tests
- maybe a HOC method so that we add async validation to other form components.