反应中的bootstrap表单在提交之前显示验证消息

Question

这是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的外观。

Answer 1

您基本上需要将错误存储在您的状态中，然后仅在它们不为空时才渲染它们。

有一个简短的例子here。