Need validation in my form page which uses react-bootstrap controller - forms

Question

I'm doing a form page using react-bootsrap controllers.
<Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label><i class="fa fa-question" aria-hidden="true"></i> What's your pet name?</Form.Label>
<Form.Control
type="text"
placeholder="enter answer"
required
autoFocus
/>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label><i class="fa fa-question" aria-hidden="true"></i> What's your Favourite sport?</Form.Label>
<Form.Control
type="text"
required
placeholder="enter answer"
autoFocus
/>
</Form.Group>
</Form>
I add required. But no validation taking place in ui. Also I want mandatory field sign a star(*) for the fields. Can anyone help me to add direct validation in this form

Answer 1

I don't understand well what you mean, but from what I read you want validation when the page is finished loading.
1, add state for handling validation
const [isInvalid, setIsInvalid] = useState(true)
2, add props isInvalid to form control, and add onChange for change the state false
<Form.Control
type="text"
placeholder="enter answer"
required
autoFocus
isInvalid={isInvalid}
onChange={(e) => setIsInvalid(false)}
/>