How do I make the input value be "required" in React-Bootstrap?

Viewed 18

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 />&nbsp;&nbsp;&nbsp;Upload
                            </Button>
                        </Modal.Footer>
                    </Form>
                </Row>
            </Container>
        </>
    );
1 Answers

You have to pass noValidate and validated=false to the Form so it can be handled by library.

<Form 
  action="/api/concerts/add-new" 
  method="post"
  noValidate 
  validated=false
/>
...
Related