rfv

RFV (React Form Validator)

React Form Validator and Form Handler.

RFV utilise Validator.js comme moteur validateur et Axios pour les demandes HTTP.

Démo (seule option de validateur de formulaire)

Demo (option de validateur de formulaire et de gestionnaire de formulaire)

Installation

Installer avec du fil.

$ yarn add rfv

Installez avec NPM.

$ npm i rfv

Usage

Formez uniquement l'option Validator.

 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' ) )

Option de validateur de formulaire et de gestionnaire de formulaire.

 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' ) )

Et ajouter des classes .is-invalid et .invalid-feedback dans votre CSS.

. is-invalid {
  border : 1 px solid # dc3545 ;
}

. invalid-feedback {
  display : none;
  color : # dc3545 ;
}

. is-invalid ~ . invalid-feedback {
  display : block;
}

Assurez-vous d'ajouter les erreurs à l'objet validations dans 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 )
} ) 

Accessoires et rappels

<Form>

Accessoires

 // 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 ...'
    }
  } }
>

Rappels

 < Form
  removeItems = { [ 'key1' , 'key2' ] }
  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>

Accessoires

 // 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'
    }
  ] }
/ >

Rappels

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

Contribution

N'hésitez pas à contribuer. Ouvrez un nouveau problème ou faites une demande de traction.

Licence

Mit