反应 CSS 表单验证

Question

While making a form on react I downloaded some libraries and copied some example I ultimately went with one I made my self but now my entire project has this validation that will stay no matter what I put in the project. Every time I click a button I get a tooltip and I have no idea how to control it.

Here is my code

import React, { useEffect } from 'react';
import axios from 'axios'

const FormRequest = () => {

   
    const formSubmitHandler = () => {
        
      console.log()
        }

    return (
        <div  >
            <div >
                <div >
                    <div>
                        <div>
                            <div></div>
                            <div></div>
                        </div>
                        <div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div >
                                <span>CONTACT</span>
                                <span>US</span>
                            </div>
    
                        </div>
                        <div >
                            <form  onSubmit={(formSubmitHandler)}>
                                <div >
                                    <input 
                                        placeholder="NAME"
                                        name="name"

                                        onChange={''} value={''} required />
                                </div>
                                <div >
                                    <input 
                                        type="email"
                                        onChange={''} value={''}
                                        placeholder="EMAIL"
                                        name="email"
                                        required />
                                </div>
                                <div >
                                    <input 

                                        placeholder="CONTACT NO"
                                        name="contact"
                                        onChange={''} value={''}
                                    />
                                </div>
                                <div >
                                    <select 
                                        placeholder="REASON"
                                        name="reasonForContact"
                                        onChange={''} value={'onForContact'}
                                        defaultValue="">

                                        <option disabled={true} value="">Reason for Contact</option>
                                        <option value="">apple</option>
                                        <option value="">coconut</option>
                                        <option selected value="coconut">cocnutn</option>
                                        <option value="mango">Mango</option>
                                    </select>

                                </div>
                                <div app-form-group >
                                    <input placeholder="MESSAGE"
                                        name="message"
                                        onChange={''} value={''} required
                                    />
                                </div>
                                <div >
                                    <div >
                                        <input
                                            type="checkbox"
                                            checked={ ''}
                                            onChange={''} value={''}

                                            name="acceptTerms"
                                            required />

                                        <p> Do you agree to us saving your details for future us?</p>
                                    </div>
                                </div>
                                <div >
                                    <button >CANCEL</button>
                                    <button >SEND</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>)
};

export default FormRequest;

Here is the output

Answer 1

The required attribute is the HTML attribute, to have the form validation for inputs like phone number, email and so on. You should know about this.

Answer 2

Remove the "required" keyword from your input fields