Validation and isValid issues facing with Formik in react js - reactjs

Question

I am using formik in react js.. currently I just added enableReinitialize to update the initialValues after there is any change in state.. so here the validation message are shown even after the correcting the text. This validation message get's removed after clicking outside of textbox. can I hide this message as soon as the the data is corrected in textbox.
Dirty and isValid keeps the button disabled even though there are no validations.
Register.JS
import React, { Component, useState } from 'react';
import {Formik} from 'formik';
import validateSignUp from '../../containers/Validations/SignUp/SignUpValidation'
class Register extends Component {
constructor(props) {
super();
this.state = {
fields: {CountryCode:'', EmailId:'', Password:''},
errors: {},
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
let fields = this.state.fields;
fields[e.target.name] = e.target.value;
this.setState({
fields,
});
}
handleSubmit(){
console.log(this.state.fields);
}
render() {
return (
<Formik
enableReinitialize
initialValues={this.state.fields}
validate={validateSignUp}
>
{({errors, touched, handleBlur, isSubmitting, isValid, dirty}) => (
<div className='signUp-form form_wrapper'>
<div className='form-body'>
<form name='first' onSubmit={this.handleSubmit}>
<div className='row'></div>
<div className='form-group'>
<label>Email address</label>
<input type='email' name="EmailId"
onChange={this.handleChange} placeholder='abc#example.com'
onBlur={handleBlur} value={this.state.fields.EmailId}
className='form-control'/>
<div className='info-message'>
<div className='errorMsg'>{errors.EmailId &&
touched.EmailId && errors.EmailId}</div>
</div>
</div>
<div className='form-group'>
<label>Password</label>
<input type='password' name="Password"
onChange={this.handleChange} onBlur={handleBlur} value={this.state.fields.Password}
className='form-control'/>
<div className='info-message'>
<div className='errorMsg'>{errors.Password &&
touched.Password && errors.Password}</div>
</div>
</div>
<button type='submit' disabled={!(isValid && dirty)} className='btn btn-danger'>
continue
</button>
</form>
</div>
</div>
)}
</Formik>
);
}
}
export default Register;
SignUpValidation.JS
const validateSignUp = validate => {
const errors = {};
if (!validate.EmailId) {
errors.EmailId = 'Please Enter Email ID';
} else if (!/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(validate.EmailId)) {
errors.EmailId = 'Invalid email address';
}
if (!validate.Password) {
errors.Password = 'Please Enter New Password Which you want to set';
} else if (!validate.Password.match(/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*
[##$%&]).*$/)) {
errors.Password = 'Password Must contain at least one number and one uppercase and lowercase
letter, and at least 8 or more characters';
}
return errors;
};
export default validateSignUp;

Answer 1

I think you should use yup for formik validations as it automatically handle those cases.