Miss any of our Open RFC calls?Watch the recordings here! »

rfv

0.0.36 • Public • Published

RFV (React Form Validator)

npm license

React form validator and form handler.

RFV uses Validator.js as a validator engine, and Axios for HTTP requests.

Demo (Only form validator option)

Demo (Form validator and form handler option)

Installation

Install with Yarn.

$ yarn add rfv

Install with NPM.

$ npm i rfv

Usage

Only form validator option.

import React from 'react'
import ReactDOM from 'react-dom'
 
// Import package
import { Form, Input, Textarea } from 'rfv'
 
// Create validation rules (https://github.com/chriso/validator.js#validators)
const validations = {
  email: [
    {
      rule: 'isEmail',
      invalidFeedback: 'Please provide a valid email'
    }
  ],
  message: [
    {
      rule: 'isLength',
      args: { min: 1 },
      invalidFeedback: 'Please provide a message'
    }
  ]
}
 
const App = () => {
  // Learn the status of validation with `res.isFormValid` and get your form data as an object with `res.items` to make an AJAX request or something else
  const onSubmit = (res) => {
    if (res.isFormValid) {
      post('url', res.items)
    }
  }
 
  return (
    // Build your form
    <Form onSubmit={onSubmit}>
      <div>
        <Input
          type='email'
          name='email'
          validations={validations.email} />
      </div>
 
      <div>
        <Textarea
          name='message'
          validations={validations.message} />
      </div>
 
      <div>
        <button>Submit</button>
      </div>
    </Form>
  )
}
 
ReactDOM.render(<App />, document.getElementById('root'))

Form validator and form handler option.

import React from 'react'
import ReactDOM from 'react-dom'
 
// Import package
import { Form, Input, Textarea } from 'rfv'
 
// Create validation rules (https://github.com/chriso/validator.js#validators)
const validations = {
  email: [
    {
      rule: 'isEmail',
      invalidFeedback: 'Please provide a valid email'
    }
  ],
  message: [
    {
      rule: 'isLength',
      args: { min: 1 },
      invalidFeedback: 'Please provide a message'
    }
  ]
}
 
const App = () => {
  // After an AJAX call, call the `res.data` to get the backend results
  const postSubmit = (res) => {
    console.log(res.data)
  }
 
  return (
    // Build your form
    <Form
      postSubmit={postSubmit}
      postOptions={{ method: 'post', url: 'url' }}>
      <div>
        <Input
          type='email'
          name='email'
          validations={validations.email} />
      </div>
 
      <div>
        <Textarea
          name='message'
          validations={validations.message} />
      </div>
 
      <div>
        <button>Submit</button>
      </div>
    </Form>
  )
}
 
ReactDOM.render(<App />, document.getElementById('root'))

And add .is-invalid and .invalid-feedback classes into your CSS.

.is-invalid {
  border: 1px solid #dc3545;
}
 
.invalid-feedback {
  display: none;
  color: #dc3545;
}
 
.is-invalid ~ .invalid-feedback {
  display: block;
}

Make sure you add the errors to the validations object in backend.

app.post('/sign-up', (req, res) => {
  const result = {
    validations: {}
  }
 
  if (req.body.username === 'john') {
    result.validations.username = 'john is already registered'
  }
 
  res.send(result)
})

Props & Callbacks

<Form>

Props

// Since RFV uses Axios for HTTP requests, whatever you pass into postOptions prop except `data: {}`, directly goes into Axios
<Form
  runValidation={true|false}
  postOptions={{
    url: 'url',
    method: 'post',
    headers: {
      'Authorization': 'Token ...'
    }
  }}>

Callbacks

<Form
  preSubmit={(res) => {
    // res.e
    // res.items
    // res.setItems({})
  }}
  onSubmit={(res) => {
    // res.e
    // res.items
    // res.isFormValid
    // res.setItems({})
  }}
  postSubmit={(res) => {
    // res.e
    // res.data
    // res.error
    // res.items
    // res.isFormValid
    // res.setItems({})
    // res.isPostSubmitFormValid
  }}>

<Input>, <Select>, <Textarea>

Props

// You can pass more than one validation
<Input
  validations={[
    {
      rule: 'isLength',
      args: { min: 1 },
      invalidFeedback: 'Please provide a username'
    },
    {
      rule: 'isLength',
      args: { min: 4, max: 32 },
      invalidFeedback: 'Username must be minimum 4, maximum 32 characters'
    }
  ]} />

Callbacks

<Input
  onChange={(res) => {
    // res.e
    // res.validated
  }} />

Contribution

Feel free to contribute. Open a new issue, or make a pull request.

License

MIT

Install

npm i rfv

DownloadsWeekly Downloads

0

Version

0.0.36

License

MIT

Unpacked Size

30 kB

Total Files

9

Last publish

Collaborators

  • avatar