isInvalid prop isn't highlighting the input box red - react-bootstrap form

Question

I am using React along with react-bootstrap for creating forms.

I have a form with an email field like this -

Code -

<Form
  noValidate
  autoComplete="off"
  validated={this.state.validated}
  onSubmit={this.handleSubmit}
>
  <Form.Group className="mb-3" controlId="email">
    <Form.Label>Email</Form.Label>
    <Form.Control
      type="email"
      aria-describedby="email"
      placeholder="Email"
      value={this.state.email}
      onChange={this.handleChange}
      name="email"
      required
    />
    <Form.Control.Feedback type="invalid">
      Please enter your email
    </Form.Control.Feedback>
  </Form.Group>
  <Button type="submit">Register</Button>
</Form>

I know that if I want to keep showing the error message even if the user has filled the field I can do this - <Form.Control isInvalid={true}>

But this doesn't remove the green border and the tick mark, and the form still gets submitted. Only the invalid message is visible

Is there any way or any class name that I can specify so that react-bootstrap doesn't consider the field as validated?

I want to do this as the email validation in react bootstrap forms considers this as a correct email - my@email . So, I want to apply custom validation.

Answer 1

Try adding isValid={false} prop to <Form.Control />. It should do it. For more info see the docs here .

Answer 2

When using a Form.Control.Feedback element with type="invalid", you must also use the isInvalid property on the Form.Control, ie isInvalid={true}

Answer 3

你能找到解决方案吗？