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;

requiredkeyword in the code and remove those it will solve your problemrequiredkeyword on your input elements causes the standard browser input validation. If you remove this attribute you won't see the standard browser form validation anymore