ReactJS: Validation not working with Yup using Formik multistep form

Question

I have a multi steps form in which i have used a Formik and Yup libraries.

But the validation that i am using of yup library is not working at all. In React debugger tool i am getting it's value as empty. So, whatever i write in the input field it validates with "Required" message as it's value is empty.

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

let accountInfoSchema = Yup.object().shape({
  name: Yup.string()
  .max(20, 'Too Long!')
  .required('Name is Required'),
});

class AccountInfo extends Component {
 handleChange = event => {
    this.setState({    
      userAccountData: Object.assign(
        {}, 
        this.state.userAccountData,
        { [event.target.name]: event.target.value }
      ),
    })
  }

 AccountInfoView = () => {
    return (
      <section className="form">
      <React.Fragment>
        <Formik
          initialValues={{name:'' }}
          validationSchema={accountInfoSchema}
          render={() => {
          return(
        <Form onSubmit={this.handleSubmit}>
        {this.Step1()}
        {this.Step2()}
        {this.Step3()}
        <li className="stb_btn half">
          <div className="custom_group">
            {this.previousButton()}
          </div>
        </li>
        <li className="stb_btn half">
          <div className="custom_group">
            {this.nextButton()}
          </div>
        </li>
        </Form>
        );
      }}
      />
      </React.Fragment>
      </div>
    </section>
    )
  }

Step1 = () => {
return(
<li>
   <div className="custom_group">
   <Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />
   <label className="label_two">Name</label>
   <ErrorMessage name="name" />
   </div>
 </li>
)
}

render() {    

    return (
      <div>{this.AccountInfoView()}</div>
    )
  }


}

please review the react console response for the value as empty.

I have already deleted my last question after knowing that these both are almost same. As my other two single paged forms are already working but this multi step is not working so that i asked this question... and i am already following this tutorial . Thanks. — TMA

Vencovsky Vencovsky · Accepted Answer · 2019-05-17T12:00:24

The reason why it isn't validating is because you are passing to the Field this.state.userAccountData['name'] and onChange={this.handleChange}.

Formik already have a state to store all of the data from your form, you don't need to keep it in the components state.

When you add onChange={this.handleChange} to the field, you change the component's state, but don't change the Formik's state, this is why the validation isn't triggering.

I'm not sure why you are keeping the name in the state, but if you don't have any reason why these are unecessary.

 // formik already handle the state for you inside `values`
 handleChange = event => {
    this.setState({    
      userAccountData: Object.assign(
        {}, 
        this.state.userAccountData,
        { [event.target.name]: event.target.value }
      ),
    })
  }

// Formik already handles the value and the onChange of the input
<Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />

The only thing you need is to set the field's name prop, so it matches the validation.

// this is enough
<Field type="text" name="name" className="trans text_input" placeholder="Enter your name" />

ReactJS: Validation not working with Yup using Formik multistep form

1 Answers