Here is my code, I did write "required" inside <Form.Control>. I also checked the documentation https://react-bootstrap.github.io/forms/validation/
But still doesn't work, could someone give me some suggestions? Thank you so much :)
return (
<>
<Helmet>
<title>Add Media</title>
</Helmet>
<Container className="d-flex justify-content-center mt-3">
<Row className="col-12 col-sm-12 col-lg-6">
<Form action="/api/concerts/add-new" method="post">
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Title</Form.Label>
<Form.Control
required
type="text"
placeholder="title"
name="title"
value={title}
id=""
onChange={(e) => setTitle(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>YouTube Link</Form.Label>
<Form.Control
required
type="text"
placeholder="paste the YouTube link here"
name="title"
value={youTubeSrc}
id=""
onChange={(e) => setYouTubeSrc(e.target.value)}
/>
</Form.Group>
<Modal.Footer>
<Button variant="dark text-white col-12 mx-auto" type="submit" onClick={handleSubmit}>
<TbUpload /> Upload
</Button>
</Modal.Footer>
</Form>
</Row>
</Container>
</>
);