React js form validation

I use Validate.JS for validation with ReactJS. I think it's pretty simple and neat!

I know its not a good way to manipulate the dom directly in React, but you can even use jquery validate which works perfectly. Use the build in submit handler and pass functions created in React to handle submissions.

Note : As I am not truly manipulating the DOM with jquery, I have not encountered any issues with this plugin

I've written that a flexible validation library, which you can use with not react only

There are a number of solutions. Component libraries like ReactBootstrap (https://react-bootstrap.github.io/components/forms/), AntDesign (https://ant.design/components/form/) that provide ready-made components to build your UIs. They include form component with state control, but depend on other components of the set. Others like Calidation (https://github.com/selbekk/calidation) expose wrapper components to access form state control in covered scope. In other words, you simply wrap your arbitrary (e.g. existing) form content with wrapper and gain control on the form/inputs validation state. With pros you set up validation rules.

I personally prefer that approach, but with connecting to standardized HTML5 Constraint Validation API. User agent aka browser does the validation anyway, and does it properly and mature. Why not to rely on it? So the solution is https://github.com/dsheiko/react-html5-form You define your form scope with Form component and specify inputs for validation with InputGroup one. That it, you get in each scope it's validity state and error messages.

I've written a very simple React library to deal with form validation: https://github.com/tkrotoff/react-form-with-constraints

Main benefits:

• Support HTML5 input attributes (required, type="email", maxlength...)
• Small and unobtrusive: easy to adapt regular React code
• Async support
• Support for React Native
• Styling for Bootstrap 4 and Material UI out of the box

Examples here: https://github.com/tkrotoff/react-form-with-constraints/blob/master/README.md#examples

I have used redux-form and formik in the past, and recently React introduced Hook, and i have built a custom hook for it. Please check it out and see if it make your form validation much easier.

Github: https://github.com/bluebill1049/react-hook-form

Website: http://react-hook-form.now.sh

example below:

import React from 'react'
import useForm from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() // initialise the hook
  const onSubmit = (data) => { console.log(data) } // callback when validation pass

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> {/* register an input */}

      <input name="lastname" ref={register({ required: true })} /> {/* apply required validation */}
      {errors.lastname && 'Last name is required.'} {/* error message */}

      <input name="age" ref={register({ pattern: /\d+/ })} /> {/* apply a Refex validation */}
      {errors.age && 'Please enter number for age.'} {/* error message */}

      <input type="submit" />
    </form>
  )
}