Это код для form validation in react, но error message отображается для всех полей, before im hitting submit button, но я хочу отображать сообщение об ошибке, только когда я нажимаю на определенное поле, тогда должно отображаться соответствующее сообщение об ошибке, если я даже не нажал на один из полей, то он должен отображать либо green, либо красный, пожалуйста, помогите мне решить эту проблему.
render() {
const { hospital_data } = this.state;
return (
<div className="register">
<div className="container">
<div className="row">
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">Sign Up</h1>
<p className="lead text-center">Create your account</p>
<form className="container was-validated" onSubmit={this.onSubmit} noValidate >
<div className="form-group">
<label className="form-control-label" htmlFor="inputSuccess1">Your Name:</label>
<div className="col-xs-5 selectContainer">
<input id="inputSuccess1" type="text" className="form-control form-control-lg" placeholder="Name" name="name" value={this.state.name} onChange={this.onChange} required minLength="5" />
<div className="invalid-feedback">Enter atleast 5 characters.</div>
</div>
</div>
<div className="form-group">
<label className="col-xs-3 control-label">Language</label>
<div className="col-xs-5 selectContainer">
<select required name="hospital_id" className="form-control" value={this.state.value} onChange={this.onChange}>
<option value="">select hospital</option>
{hospital_data.map((item) =>
<option key={item._id} value={item._id}>{item.name}</option>
)}
</select>
<div className="invalid-feedback">Choose any 1 hospital.</div>
</div>
</div>
<div ><label htmlFor="customRadioInline1">Choose Gender:</label></div>
<div className="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="gender" className="custom-control-input" value="male" onChange={this.onChange} required />
<label className="custom-control-label" htmlFor="customRadioInline1">Male</label>
</div>
<div className="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="gender" className="custom-control-input" value="female" onChange={this.onChange} required />
<label className="custom-control-label" htmlFor="customRadioInline2">Female</label>
</div>
<div className="form-group">
<div><label htmlFor="designation">Enter Designation:</label></div>
<input type="text" className="form-control form-control-lg" placeholder="Designation" name="designation" value={this.state.designation} onChange={this.onChange} minLength="5" required />
<div className="invalid-feedback">Enter your designation.</div>
</div>
<div className="form-group">
<label htmlFor="email">Enter Your Mail ID:</label>
<input type="email" className="form-control form-control-lg" placeholder="Email Address" name="email" value={this.state.email} onChange={this.onChange} required />
<div className="invalid-feedback">Enter a valid Mail address</div>
</div>
<div className="form-group">
<label htmlFor="password">Enter Password:</label>
<input type="password" className="form-control form-control-lg" placeholder="Password" name="password" value={this.state.password} onChange={this.onChange} minLength="5" required />
<div className="invalid-feedback">Enter atleast 5 characters.</div>
</div>
<div className="form-group">
<label htmlFor="confirm_password">Confirm Password:</label>
<input type="password" className="form-control form-control-lg" placeholder="confirm Password" name="confirm_password" value={this.state.password2} onChange={this.onChange} required />
<div className="invalid-feedback">password should match.</div>
</div>
<input type="submit" className="btn btn-info btn-block mt-4" />
</form>
</div>
</div>
</div>
</div>
)
Это picture как это выглядит, когда я загружаю страницу.
