How to properly validate input values with React JS

Question

I have a simple form  All of the components and state are held in the Page component  There are 2 display headers and 3 input fields  The first input is supposed to be text  and the second and third are supposed to be ints  When the user inputs the wrong type of data  I want to have an error message pop up next to the input field  My questions relate to best practices in React JS  Who decides that the value is in valid  I suppose that the only job of the input field is to direct the value back to component holding the state  so does this mean that only Page can determine if a value is valid   How should I then have the pop up appear  Should Page have to trigger a new boolean state element that will be passed through perp that will tell Adaptive Input to reveal the error message   JSFiddle  JS           jsx React DOM     var Adaptive Input   React createClass        handle change  function            var new text   this refs input getDOMNode   value          this props on Input Change new text              render  function            return                    lt div className  adaptive placeholder input container  gt                       lt input                          className  adaptive input                          type  text                           required  required                           onChange   this handle change                          ref  input                       gt  lt  input gt                       lt label                         className  adaptive placeholder                          alt  this props initial                          placeholder  this props focused                       gt  lt  label gt                   lt  div gt                                              var Form   React createClass       render  function            return                    lt form gt                       lt Adaptive Input                         initial   Name Input                           focused   Name Input                           on Input Change  this props handle text input                        gt                       lt Adaptive Input                         initial   Value 1                           focused   Value 1                           on Input Change  this props handle value 1 input                        gt                       lt Adaptive Input                         initial   Value 2                           focused   Value 2                           on Input Change  this props handle value 2 input                        gt                   lt  form gt                                var Page   React createClass       getInitialState  function            return               Name    No Name               Value 1    0               Value 2    0               Display Value   0                        handle text input  function new text           this setState                   Name  new text                            handle value 1 input  function new value           console log                 var updated display   parseInt new value    parseInt this state Value 2           updated display   updated display toString            this setState                   Display Value  updated display                             handle value 2 input  function new value           var updated display   parseInt this state Value 1    parseInt new value           updated display   updated display toString            this setState                   Display Value  updated display                            render  function            return                   lt div gt                       lt h2 gt  this state Name  lt  h2 gt                       lt h2 gt Value 1   Value 2    this state Display Value  lt  h2 gt                       lt Form                         handle text input  this handle text input                          handle value 1 input    this handle value 1 input                          handle value 2 input    this handle value 2 input                        gt                   lt  div gt                        React renderComponent  lt Page   gt   document body

User · Answer

Your jsfiddle does not work anymore  I ve fixed it  http   jsfiddle net tkrotoff bgC6E 40  using React 16 and ES6 classes   class Adaptive Input extends React Component     handle change e        var new text   e currentTarget value      this props on Input Change new text          render         return          lt div className  adaptive placeholder input container  gt           lt input           className  adaptive input            type  text            required  required            onChange  this handle change bind this     gt           lt label           className  adaptive placeholder            alt  this props initial            placeholder  this props focused    gt         lt  div gt                class Form extends React Component     render         return          lt form gt           lt Adaptive Input           initial   Name Input             focused   Name Input             on Input Change  this props handle text input    gt            lt Adaptive Input           initial   Value 1             focused   Value 1             on Input Change  this props handle value 1 input    gt            lt Adaptive Input           initial   Value 2             focused   Value 2             on Input Change  this props handle value 2 input    gt         lt  form gt                class Page extends React Component     constructor props        super props        this state           Name   No Name         Value 1   0         Value 2   0         Display Value   0                handle text input new text        this setState         Name  new text                handle value 1 input new value        new value   parseInt new value       var updated display   new value   parseInt this state Value 2       updated display   updated display toString        this setState         Value 1  new value        Display Value  updated display                handle value 2 input new value        new value   parseInt new value       var updated display   parseInt this state Value 1    new value      updated display   updated display toString        this setState         Value 2  new value        Display Value  updated display                render         return         lt div gt           lt h2 gt  this state Name  lt  h2 gt           lt h2 gt Value 1   Value 2    this state Display Value  lt  h2 gt           lt Form           handle text input  this handle text input bind this             handle value 1 input  this handle value 1 input bind this             handle value 2 input  this handle value 2 input bind this             gt         lt  div gt                ReactDOM render  lt Page   gt   document getElementById  app       And now the same code hacked with form validation thanks to this library  https   github com tkrotoff react-form-with-constraints    http   jsfiddle net tkrotoff k4qa4heg     const   FormWithConstraints  FieldFeedbacks  FieldFeedback     ReactFormWithConstraints   class Adaptive Input extends React Component     static contextTypes         form  PropTypes object isRequired         constructor props        super props        this state           field  undefined             this fieldWillValidate   this fieldWillValidate bind this       this fieldDidValidate   this fieldDidValidate bind this          componentWillMount         this context form addFieldWillValidateEventListener this fieldWillValidate       this context form addFieldDidValidateEventListener this fieldDidValidate          componentWillUnmount         this context form removeFieldWillValidateEventListener this fieldWillValidate       this context form removeFieldDidValidateEventListener this fieldDidValidate          fieldWillValidate fieldName        if  fieldName     this props name  this setState  field  undefined           fieldDidValidate field        if  field name     this props name  this setState  field           handle change e        var new text   e currentTarget value      this props on Input Change e  new text          render         const   field     this state      let className    adaptive placeholder input container       if  field     undefined          if  field hasErrors    className      error         if  field hasWarnings    className      warning              return          lt div className  className  gt           lt input           type  this props type            name  this props name            className  adaptive input            required           onChange  this handle change bind this     gt           lt label           className  adaptive placeholder            alt  this props initial            placeholder  this props focused    gt         lt  div gt                class Form extends React Component     constructor props        super props        this state           Name   No Name         Value 1   0         Value 2   0         Display Value   0                handle text input e  new text        this form validateFields e currentTarget        this setState         Name  new text                handle value 1 input e  new value        this form validateFields e currentTarget        if  this form isValid            new value   parseInt new value         var updated display   new value   parseInt this state Value 2         updated display   updated display toString          this setState           Value 1  new value          Display Value  updated display                     else         this setState           Display Value   Error                         handle value 2 input e  new value        this form validateFields e currentTarget        if  this form isValid            new value   parseInt new value         var updated display   parseInt this state Value 1    new value        updated display   updated display toString          this setState           Value 2  new value          Display Value  updated display                     else         this setState           Display Value   Error                         render         return         lt div gt           lt h2 gt Name   this state Name  lt  h2 gt           lt h2 gt Value 1   Value 2    this state Display Value  lt  h2 gt            lt FormWithConstraints ref  form   gt  this form   form  noValidate gt             lt Adaptive Input             type  text              name  name input              initial   Name Input               focused   Name Input               on Input Change  this handle text input bind this     gt             lt FieldFeedbacks for  name input  gt               lt FieldFeedback when     error   gt               lt FieldFeedback when  value   gt      w    test value   warning gt Should only contain alphanumeric characters lt  FieldFeedback gt             lt  FieldFeedbacks gt              lt Adaptive Input             type  number              name  value 1 input              initial   Value 1               focused   Value 1               on Input Change  this handle value 1 input bind this     gt             lt FieldFeedbacks for  value 1 input  gt               lt FieldFeedback when       gt             lt  FieldFeedbacks gt              lt Adaptive Input             type  number              name  value 2 input              initial   Value 2               focused   Value 2               on Input Change  this handle value 2 input bind this     gt             lt FieldFeedbacks for  value 2 input  gt               lt FieldFeedback when       gt             lt  FieldFeedbacks gt           lt  FormWithConstraints gt         lt  div gt                ReactDOM render  lt Form   gt   document getElementById  app       The proposed solution here is hackish as I ve tried to keep it close to the original jsfiddle  For proper form validation with react-form-with-constraints  check https   github com tkrotoff react-form-with-constraints examples

User · Answer

You can use npm install --save redux-form  Im writing a simple email and submit button form  which validates email and submits form  with redux-form  form by default runs event preventDefault   on html onSubmit action   import React   Component  from  react   import  reduxForm  from  redux-form    class LoginForm extends Component     onSubmit props          do your submit stuff         render         const  fields   email   handleSubmit    this props       return          lt form onSubmit  handleSubmit this onSubmit bind this    gt           lt input type  text  placeholder  Email                 className   form-control   email touched  amp  amp  email invalid    has-error                         email            gt             lt span className  text-help  gt               email touched   email error                  lt  span gt           lt input type  submit   gt         lt  form gt                function validation values      const errors         const emailPattern              2         2       if   emailPattern test values email         errors email    Enter a valid email          return errors     LoginForm   reduxForm     form   LoginForm     fields    email      validate  validation    null  null  LoginForm    export default LoginForm

User · Answer

yet another go at the same problem - form-container on npm

User · Answer

I have written This library which allows you to wrap your form element components  and lets you define your validators in the format  -   lt Validation group  myGroup1      validators                               validator   val    gt   validator isEmpty val                errorMessage   Cannot be left empty                                gt               lt TextField value  this state value                         className  styles inputStyles                         onChange                            evt   gt                             console log  you have typed     evt target value                                                       gt   lt  Validation gt

User · Answer

Sometimes you can have multiple fields with similar validation in your application  In such a case I recommend to create common component field where you keep this validation   For instance  let s assume that you have mandatory text input in a few places in your application  You can create a TextInput component   constructor props        super props        this state             touched  false  error      class      value              onValueChanged    event    gt        let  error  validClass  value             event target value         error  validClass      value  amp  amp  this props required               Value cannot be empty    is-invalid           is-valid        this props onChange  value  value  error  error         this setState           touched  true          error  error          class  validClass          value  value           render         return            lt div gt               lt input type  text                  value  this props value                  onChange  this onValueChanged                  className   form-control     this state class                  id   this props id                   placeholder  this props placeholder    gt               this state error                    lt div className  invalid-feedback  gt                       this state error                   lt  div gt    null                        lt  div gt            And then you can use such a component anywhere in your application   constructor props        super props       this state             user   firstName      lastName               formState                firstName    error                    lastName    error                          onFirstNameChange    model    gt        let user   this state user      user firstName   model value       this setState           user  user          formState      this state formState  firstName    error  model error              onLastNameChange    model    gt        let user   this state user      user lastName   model value       this setState           user  user          formState      this state formState  lastName    error  model error               onSubmit    e    gt          submit logic     render         return            lt form onSubmit  this onSubmit  gt               lt TextInput id  input firstName                  value  this state user firstName                  onChange  this onFirstNameChange                  required    true                  placeholder  First name    gt                lt TextInput id  input lastName                  value  this state user lastName                  onChange  this onLastNameChange                  required    true                  placeholder  Last name    gt                this state formState firstName error    this state formState lastName error                    lt button type  submit  disabled className  btn btn-primary margin-left disabled  gt Save lt  button gt                     lt button type  submit  className  btn btn-primary margin-left  gt Save lt  button gt                          lt  form gt            Benefits    You don t repeat your validation logic Less code in your forms - it is more readable Other common input logic can be kept in component You follow React rule that component should be as dumb as possible   Ref  https   webfellas tech   article 5

User · Answer

I recently spent a week studying lot of solutions to validate my forms in an app  I started with all the most stared one but I couldn t find one who was working as I was expected  After few days  I became quite frustrated until i found a very new and amazing plugin  https   github com kettanaito react-advanced-form  The developper is very responsive and his solution  after my research  merit to become the most stared one from my perspective  I hope it could help and you ll appreciate

User · Answer

Use onChange  this handleChange bind this   name   method and value  this state fields  name    on input text field and below that create span element to show error  see the below example   export default class Form extends Component      constructor        super       this state           fields             name              email               message                      errors             disabled   false              handleValidation           let fields   this state fields         let errors              let formIsValid   true          if  fields  name               formIsValid   false            errors  name      Name field cannot be empty                    if typeof fields  name        undefined   amp  amp   fields  name       false             if  fields  name   match    a-zA-Z                     formIsValid   false               errors  name      Only letters                                if  fields  email               formIsValid   false            errors  email      Email field cannot be empty                    if typeof fields  email        undefined   amp  amp   fields  email       false             let lastAtPos   fields  email   lastIndexOf                 let lastDotPos   fields  email   lastIndexOf                  if    lastAtPos  lt  lastDotPos  amp  amp  lastAtPos  gt  0  amp  amp  fields  email   indexOf           -1  amp  amp  lastDotPos  gt  2  amp  amp   fields  email   length - lastDotPos   gt  2                  formIsValid   false               errors  email      Email is not valid                               if  fields  message              formIsValid   false           errors  message       Message field cannot be empty                  this setState  errors  errors          return formIsValid         handleChange field  e         let fields   this state fields        fields field    e target value        this setState  fields           handleSubmit e         e preventDefault          if this handleValidation               console log  validation successful            else            console log  validation failed                    render        return          lt form onSubmit  this handleSubmit bind this   method  POST  gt             lt div className  row  gt               lt div className  col-25  gt                   lt label htmlFor  name  gt Name lt  label gt               lt  div gt               lt div className  col-75  gt                   lt input type  text  placeholder  Enter Name   refs  name  onChange  this handleChange bind this   name    value  this state fields  name     gt                   lt span style   color   red    gt  this state errors  name    lt  span gt               lt  div gt             lt  div gt             lt div className  row  gt               lt div className  col-25  gt                 lt label htmlFor  exampleInputEmail1  gt Email address lt  label gt               lt  div gt               lt div className  col-75  gt                   lt input type  email  placeholder  Enter Email  refs  email  aria-describedby  emailHelp  onChange  this handleChange bind this   email    value  this state fields  email     gt                   lt span style   color   red    gt  this state errors  email    lt  span gt               lt  div gt             lt  div gt             lt div className  row  gt               lt div className  col-25  gt                   lt label htmlFor  message  gt Message lt  label gt               lt  div gt               lt div className  col-75  gt                   lt textarea type  text  placeholder  Enter Message  rows  5  refs  message  onChange  this handleChange bind this   message    value  this state fields  message    gt  lt  textarea gt                   lt span style   color   red    gt  this state errors  message    lt  span gt               lt  div gt             lt  div gt             lt div className  row  gt               lt button type  submit  disabled  this state disabled  gt  this state disabled    Sending        Send   lt  button gt             lt  div gt         lt  form gt

User · Answer

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   with this approach  you are no longer doing controlled input too   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    gt    console log data       callback when validation pass    return        lt form onSubmit  handleSubmit onSubmit   gt         lt input name  firstname  ref  register    gt      register an input             lt input name  lastname  ref  register   required  true       gt      apply required validation            errors lastname  amp  amp   Last name is required        error message             lt input name  age  ref  register   pattern    d         gt      apply a Refex validation            errors age  amp  amp   Please enter number for age        error message             lt input type  submit    gt       lt  form gt

User · Answer

First  here is an example of what I ll mention below  http   jsbin com rixido 2 edit  How to properly validate input values with React JS   However you want  React is for rendering a data model  The data model should know what is valid or not  You can use Backbone models  JSON data  or anything you want to represent the data and it s error state    More specifically   React is generally agnostic towards your data  It s for rendering and dealing with events   The rules to follow are      elements can change their state  they cannot change props  they can invoke a callback that will change top level props    How to decide if something should be a prop or a state  Consider this  would ANY part of your app other than the text field want to know that the value entered is bad  If no  make it a state  If yes  it should be a prop   For example  if you wanted a separate view to render  You have 2 errors on this page   then your error would have to be known to a toplevel data model   Where should that error live  If your app was rendering Backbone models  for example   the model itself would have a validate   method and validateError property you could use  You could render other smart objects that could do the same  React also says try to keep props to a minimum and generate the rest of the data  so if you had a validator  e g  https   github com flatiron revalidator  then your validations could trickle down and any component could check props with it s matching validation to see if it s valid   It s largely up to you     I am personally using Backbone models and rendering them in React  I have a toplevel error alert that I show if there is an error anywhere  describing the error

[javascript] How to properly validate input values with React.JS?

Examples related to javascript

Examples related to validation

Examples related to input

Examples related to reactjs