I'm new in programming and in my react.js application I'm trying to take information from user via form and in my form, I put required inside the form.control to make sure that the inputs are not empty and required before sending, but it's doesn't work anymore and the form sends even if it's empty

here is my code is there any way to put some validation in the form?

export default function AddCourse() {
  
    const handleChange = (e) => {
        e.preventDefault();
        const { name, value } = e.target;
        setCourseData({ ...courseData, [name]: value });
        console.log(courseData);
    };

    const handleFileChange = (e) => {
        const { name, files } = e.target;
        setCourseData({ ...courseData, [name]: files[0] });

    };

    const submitForm = () => {

        let form_data = new FormData();

        form_data.append('user', userId);
        form_data.append('category', courseData.category);
        form_data.append('name', courseData.name);
        form_data.append('brief', courseData.brief);
        form_data.append('image', courseData.image);

        try {
            axios.post(baseUrl   '/course/', form_data,

            ).then((response) => {
                // window.location.href='/AddCoursePage'; //to reload the page when the course added


                if (response.status == 201) {

                    const Swal = require('sweetalert2');

                    Swal.fire(
                        'Good job!',
                        'Course has been added successfully',
                        'success'
                    )}

            });
        } catch (error) {
            console.log(error);
        }
    };


    return (
        <Fragment>
            <div className='Pro-bg'>
                <div className='container mt-4'>
                    <Row>
                        <section className='col-md-9'>
                            <div className='card'>
                                <h5 className='card-header' >Add Course </h5>
                                <div className='card-body'>
                                    <>
                                        <Form  >
                                            <Form.Select className="mb-3" aria-label="Default select example" onChange={handleChange} name='category' required >
                                                {category.map((category, index) => {
                                                    return <option key={index} value={category.id} > {category.title} </option>
                                                })}

                                            </Form.Select>

                                            <FloatingLabel controlId="floatingTextarea" label="Course title" className="mb-3">
                                                <Form.Control name='name' type="Text" placeholder="Leave a course decription here" onChange={handleChange} required />
                                            </FloatingLabel>

                                            <FloatingLabel controlId="floatingTextarea2" label="Leave a course decription here">
                                                <Form.Control
                                                    name='brief'
                                                    required
                                                    type="Text"
                                                    placeholder="Leave a comment here"
                                                    onChange={handleChange}
                                                    style={{ height: '100px' }}

                                                />


                                            </FloatingLabel>
                                            <Form.Group controlId="formFileMultiple" className="mb-3 mt-3">

                                                <Form.Control name='image' type="file" multiple onChange={handleFileChange} required />
                                            </Form.Group>


                                        </Form>

                                        <Button blocksize="lg" variant="warning" type="submit" active onClick={submitForm} > Submit </Button>


                                    </>
                                </div>
                            </div>

                        </section>
                    </Row>
                </div>
            </div>
        </Fragment>
    )
}

please any help?

CodePudding user response：

Try to add boolean:

required={true}

A Boolean which, if true, indicates that the input must have a value before the form can be submitted. You can assign a string to return an error message in the errors object.

CodePudding user response：

import Swal from 'sweetalert2'

export default function AddCourse() {
  
    const handleChange = (e) => {
        e.preventDefault();
        const { name, value } = e.target;
        setCourseData({ ...courseData, [name]: value });
        console.log(courseData);
    }; // ...rest of your code 

and remove this from your code const Swal = require('sweetalert2');