Nascent Personality Manifestation

    formsy-react-wrapper

    0.0.3 • Public • Published

    formsy-react-wrapper Build Status

    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 (
          <FormsyWrapper.Form className='form'>
            <FormsyWrapper.Input
              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 />
          </FormsyWrapper.Form>
        )
      }
    }
    

    Error message can have translations by locale

    <FormsyWrapper.Input
      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 <FormsyWrapper.Form />. 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.

    Install

    npm i formsy-react-wrapper

    DownloadsWeekly Downloads

    0

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • woodpig07