0

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 outputenter image description here

3
  • search required keyword in the code and remove those it will solve your problem Commented Nov 28, 2020 at 11:08
  • I wonder you are not aware of the required attribute for the form elements! And you are using react to build webpages. Make sure you are familiar with the basic concepts of HTML, CSS and JS before jumping into react! Commented Nov 28, 2020 at 11:10
  • The required keyword 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 Commented Nov 28, 2020 at 11:11

2 Answers 2

2

Remove the "required" keyword from your input fields

Sign up to request clarification or add additional context in comments.

Comments

2

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.

2 Comments

Okay how do I edit the tool tip it produces. is it possible?
It is not possible with the default tooltip in HTML, but you can create a custom tooltip using CSS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.