反应 CSS 表单验证答案

【问题标题】：react CSS form validation反应 CSS 表单验证
【发布时间】：2021-03-10 22:04:24
【问题描述】：

在制作 react 表单时，我下载了一些库并复制了一些示例，我最终使用了一个我自己制作的示例，但现在我的整个项目都有这个验证，无论我在项目中添加什么，它都会保留下来。每次单击按钮时，我都会收到一个工具提示，但我不知道如何控制它。

这是我的代码

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;

这是输出

【问题讨论】：

在代码中搜索 required 关键字并删除那些它将解决您的问题
我想知道您是否不知道表单元素的必需属性！你正在使用 react 来构建网页。在开始 React 之前，请确保您熟悉 HTML、CSS 和 JS 的基本概念！
输入元素上的 required 关键字会导致标准浏览器输入验证。如果您删除此属性，您将不会再看到标准的浏览器表单验证

标签： css reactjs forms validation

【解决方案1】：

required 属性是 HTML 属性，用于对电话号码、电子邮件等输入进行表单验证。你应该知道这件事。

【讨论】：

好的，我该如何编辑它产生的工具提示。有可能吗？
在 HTML 中使用默认工具提示是不可能的，但您可以使用 CSS 创建自定义工具提示

【解决方案2】：

从您的输入字段中删除“必填”关键字

【讨论】：