Reactjs - Form input validation

Question

My Contact page form is as follows    lt form name  contactform  onSubmit  this contactSubmit bind this   gt     lt div className  col-md-6  gt       lt fieldset gt         lt input ref  name  type  text  size  30  placeholder  Name   gt         lt br  gt         lt input refs  email  type  text  size  30  placeholder  Email   gt         lt br  gt         lt input refs  phone  type  text  size  30  placeholder  Phone   gt         lt br  gt         lt input refs  address  type  text  size  30  placeholder  Address   gt         lt br  gt       lt  fieldset gt     lt  div gt     lt div className  col-md-6  gt       lt fieldset gt         lt textarea refs  message  cols  40  rows  20                  className  comments  placeholder  Message   gt       lt  fieldset gt     lt  div gt     lt div className  col-md-12  gt       lt fieldset gt         lt button className  btn btn-lg pro  id  submit                value  Submit  gt Send Message lt  button gt       lt  fieldset gt     lt  div gt   lt  form gt    Need to add validation for all fields  Can anyone help me to add validation in this react form

User · Answer

I ve taken your code and adapted it with library react-form-with-constraints  https   codepen io tkrotoff pen LLraZp  const     FormWithConstraints    FieldFeedbacks    FieldFeedback     ReactFormWithConstraints   class Form extends React Component     handleChange   e   gt        this form validateFields e target          contactSubmit   e   gt        e preventDefault         this form validateFields         if   this form isValid            console log  form is invalid  do not submit          else         console log  form is valid  submit                 render         return          lt FormWithConstraints         ref  form   gt  this form   form          onSubmit  this contactSubmit          noValidate gt            lt div className  col-md-6  gt             lt input name  name  size  30  placeholder  Name                   required onChange  this handleChange                   className  form-control    gt             lt FieldFeedbacks for  name  gt               lt FieldFeedback when       gt             lt  FieldFeedbacks gt              lt input type  email  name  email  size  30  placeholder  Email                   required onChange  this handleChange                   className  form-control    gt             lt FieldFeedbacks for  email  gt               lt FieldFeedback when       gt             lt  FieldFeedbacks gt              lt input name  phone  size  30  placeholder  Phone                   required onChange  this handleChange                   className  form-control    gt             lt FieldFeedbacks for  phone  gt               lt FieldFeedback when       gt             lt  FieldFeedbacks gt              lt input name  address  size  30  placeholder  Address                   required onChange  this handleChange                   className  form-control    gt             lt FieldFeedbacks for  address  gt               lt FieldFeedback when       gt             lt  FieldFeedbacks gt           lt  div gt            lt div className  col-md-6  gt             lt textarea name  comments  cols  40  rows  20  placeholder  Message                      required minLength  5  maxLength  50                      onChange  this handleChange                      className  form-control    gt             lt FieldFeedbacks for  comments  gt               lt FieldFeedback when       gt             lt  FieldFeedbacks gt           lt  div gt            lt div className  col-md-12  gt             lt button className  btn btn-lg btn-primary  gt Send Message lt  button gt           lt  div gt         lt  FormWithConstraints gt                 Screenshot     This is a quick hack  For a proper demo  check  https   github com tkrotoff react-form-with-constraints examples

User · Answer

With React Hook  form is made super easy  React Hook Form  https   github com bluebill1049 react-hook-form   i have reused your html markup   import React from  react   import useForm from  react-hook-form    function Test       const   useForm  register     useForm      const contactSubmit   data   gt        console log data           return        lt form name  contactform  onSubmit  contactSubmit  gt         lt div className  col-md-6  gt           lt fieldset gt             lt input name  name  type  text  size  30  placeholder  Name  ref  register    gt             lt br   gt             lt input name  email  type  text  size  30  placeholder  Email  ref  register    gt             lt br   gt             lt input name  phone  type  text  size  30  placeholder  Phone  ref  register    gt             lt br   gt             lt input name  address  type  text  size  30  placeholder  Address  ref  register    gt             lt br   gt           lt  fieldset gt         lt  div gt         lt div className  col-md-6  gt           lt fieldset gt             lt textarea name  message  cols  40  rows  20  className  comments  placeholder  Message  ref  register    gt           lt  fieldset gt         lt  div gt         lt div className  col-md-12  gt           lt fieldset gt             lt button className  btn btn-lg pro  id  submit  value  Submit  gt              Send Message            lt  button gt           lt  fieldset gt         lt  div gt       lt  form gt

User · Answer

Cleaner way is to use joi-browser package  In the state you should have errors object that includes all the errors in the form  Initially it shoud be set to an empty object  Create schema   import Joi from  joi-browser   schema         username  Joi string          required          label  Username          email        password  Joi string          required          label  Password          min 8         regex         d       a-z        A-Z         a-zA-Z0-9    8 1024       special number capital         Then validate the form with the schema   validate        gt        const options     abortEarly  false        const result   Joi validate this state data  this schema  options       console log data     always analyze your data     if   result error  return null       const errors           for  let item of result error details  errors item path 0     item message    in details array  there are 2 properties path and message path is the name of the input  message is the error message for that input      return errors         Before submitting the form  check the form   handleSubmit   e   gt        e preventDefault        const errors   this validate      will return an object     console log errors       this setState   errors  errors             in line 9 if we return     we dont need    here     if  errors  return        so we dont need to call the server     alert  success          if there is no error call the server     this dosubmit

User · Answer

import React from  react   import  sendFormData  from     services     class Signup extends React Component    constructor props       super props        this state            isDisabled true                                                                                                              this submitForm   this submitForm bind this         validateEmail email      const pattern     a-zA-Z0-9         a-zA-Z0-9         a-z  3 9      a-z  2 5  g     const result   pattern test email      if result   true        this setState          emailError false         email email              else       this setState          emailError true                  handleChange e     const target   e target    const value   target type      checkbox    target checked   target value    const name   target name    this setState        name   value         if e target name    firstname        if e target value         e target value   null          this setState           firstnameError true                else         this setState           firstnameError false               firstName e target value                      if e target name    lastname        if e target value         e target value   null         this setState           lastnameError true                else         this setState           lastnameError false          lastName e target value                      if e target name    email       this validateEmail e target value         if e target name    password        if e target value         e target value   null         this setState           passwordError true                else         this setState           passwordError false          password e target value                    if this state firstnameError   false  amp  amp  this state lastnameError   false  amp  amp     this state emailError   false  amp  amp  this state passwordError   false       this setState         isDisabled false             submitForm e     e preventDefault      const data        firstName  this state firstName     lastName  this state lastName     email  this state email     password  this state password       sendFormData data  then res  gt       if res status   200         alert res data         this props history push            else                   render    return     lt div className  container  gt       lt div className  card card-login mx-auto mt-5  gt         lt div className  card-header  gt Register here lt  div gt           lt div className  card-body  gt               lt form id  signup-form  gt                 lt div className  form-group  gt                   lt div className  form-label-group  gt                     lt input type  text  id  firstname  name  firstname  className  form-control  placeholder  Enter firstname  onChange   e   gt  this handleChange e      gt                     lt label htmlFor  firstname  gt firstname lt  label gt                     this state firstnameError    lt span style   color   red    gt Please Enter some value lt  span gt                          lt  div gt                 lt  div gt                 lt div className  form-group  gt                   lt div className  form-label-group  gt                     lt input type  text  id  lastname  name  lastname  className  form-control  placeholder  Enter lastname  onChange   e   gt  this handleChange e      gt                     lt label htmlFor  lastname  gt lastname lt  label gt                     this state lastnameError    lt span style   color   red    gt Please Enter some value lt  span gt                         lt  div gt                 lt  div gt                 lt div className  form-group  gt                   lt div className  form-label-group  gt                     lt input type  email  id  email  name  email  className  form-control  placeholder  Enter your email  onChange   e   gt  this handleChange e      gt                     lt label htmlFor  email  gt email lt  label gt                     this state emailError    lt span style   color   red    gt Please Enter valid email address lt  span gt                         lt  div gt                 lt  div gt                                 lt div className  form-group  gt                   lt div className  form-label-group  gt                     lt input type  password  id  password  name  password  className  form-control  placeholder  Password  onChange   e   gt  this handleChange e      gt                     lt label htmlFor  password  gt Password lt  label gt                     this state passwordError    lt span style   color   red    gt Please enter some   value lt  span gt                         lt  div gt                 lt  div gt                                 lt button className  btn btn-primary btn-block  disabled  this state isDisabled  onClick  this submitForm  gt Signup lt  button gt               lt  form gt           lt  div gt         lt  div gt       lt  div gt            export default Signup

User · Answer

Try powerform-react   It is based upon powerform which is a super portable Javascript form library  Once learnt  it can be used in any framework  It works even with vanilla Javascript  Checkout this simple form that uses powerform-react There is also a complex example

User · Answer

Try this  example  the required property in below input tag will ensure that the name field should be submitted empty   lt input type  quot text quot  placeholder  quot Your Name quot  required   gt

User · Answer

You should avoid using refs  you can do it with onChange function  On every change  update the state for the changed field  Then you can easily check if that field is empty or whatever else you want  You could do something as follows       class Test extends React Component           constructor props              super props                     this state                    fields                     errors                                         handleValidation                let fields   this state fields              let errors                   let formIsValid   true                 Name             if  fields  quot name quot                    formIsValid   false                 errors  quot name quot      quot Cannot be empty quot                                    if typeof fields  quot name quot        quot undefined quot                   if  fields  quot name quot   match    a-zA-Z                          formIsValid   false                    errors  quot name quot      quot Only letters quot                                                                Email             if  fields  quot email quot                    formIsValid   false                 errors  quot email quot      quot Cannot be empty quot                                    if typeof fields  quot email quot        quot undefined quot                   let lastAtPos   fields  quot email quot   lastIndexOf                      let lastDotPos   fields  quot email quot   lastIndexOf                       if    lastAtPos  lt  lastDotPos  amp  amp  lastAtPos  gt  0  amp  amp  fields  quot email quot   indexOf          -1  amp  amp  lastDotPos  gt  2  amp  amp   fields  quot email quot   length - lastDotPos   gt  2                       formIsValid   false                    errors  quot email quot      quot Email is not valid quot                                                this setState  errors  errors               return formIsValid                           contactSubmit e               e preventDefault                 if this handleValidation                    alert  quot Form submitted quot                 else                 alert  quot Form has errors  quot                                               handleChange field  e                        let fields   this state fields              fields field    e target value                      this setState  fields                           render                return                    lt div gt                                 lt form name  quot contactform quot  className  quot contactform quot  onSubmit   this contactSubmit bind this   gt                           lt div className  quot col-md-6 quot  gt                             lt fieldset gt                                  lt input ref  quot name quot  type  quot text quot  size  quot 30 quot  placeholder  quot Name quot  onChange  this handleChange bind this   quot name quot    value  this state fields  quot name quot     gt                                  lt span style   color   quot red quot    gt  this state errors  quot name quot    lt  span gt                                 lt br  gt                                lt input refs  quot email quot  type  quot text quot  size  quot 30 quot  placeholder  quot Email quot  onChange  this handleChange bind this   quot email quot    value  this state fields  quot email quot     gt                                lt span style   color   quot red quot    gt  this state errors  quot email quot    lt  span gt                                lt br  gt                                lt input refs  quot phone quot  type  quot text quot  size  quot 30 quot  placeholder  quot Phone quot  onChange  this handleChange bind this   quot phone quot    value  this state fields  quot phone quot     gt                                lt br  gt                                lt input refs  quot address quot  type  quot text quot  size  quot 30 quot  placeholder  quot Address quot  onChange  this handleChange bind this   quot address quot    value  this state fields  quot address quot     gt                                lt br  gt                            lt  fieldset gt                         lt  div gt                                lt  form gt                   lt  div gt                                   React render  lt Test   gt   document getElementById  container       In this example I did the validation only for email and name  but you have an idea how to do it  For the rest you can do it self  There is maybe a better way  but you will get the idea  Here is fiddle  Hope this helps

User · Answer

Might be late to answer - if you don t want to modify your current code a lot and still be able to have similar validation code all over your project  you may try this one too -  https   github com vishalvisd react-validator

User · Answer

We have plenty of options to validate the react js forms  Maybe the npm packages have some own limitations  Based up on your needs you can choose the right validator packages  I would like to recommend some  those are listed below    react-form-input-validation redux-form   If anybody knows a better solution than this  please put it on the comment section for other people references

[javascript] Reactjs - Form input validation

Examples related to javascript

Examples related to node.js

Examples related to reactjs

Examples related to forms

Examples related to validation