在复选框更改时提交表单并保持内置浏览器验证答案

【问题标题】：Submit form on checkbox change and keep built-in browser validation在复选框更改时提交表单并保持内置浏览器验证
【发布时间】：2020-11-14 14:23:12
【问题描述】：

我的表单由文本输入和一个复选框组成。

表单提交时文本输入不能为空，因此required参数。

我想在每个复选框更改时提交表单，并且仍然保留此内置验证。目前，如果文本输入为空并且我单击复选框，它将提交。

如何在复选框更改时保持验证？

const Form = () => {

    const handleSubmit = (e: any) => {
        e.preventDefault()        
        alert('submitted')
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" required />
            <input type="checkbox" onChange={(e) => handleSubmit(e)} />
            <button type="submit">Submit</button>
        </form>
    )
}

const root = document.getElementById('root')
ReactDOM.render(<Form />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【问题讨论】：

我不认为你可以保持内置验证，因为event 在你的情况下是不同的，一个来自复选框onChange，另一个来自表单onSubmit。我只需检查handleSubmit 中的条件并为两者创建自定义验证。

标签： javascript html reactjs

【解决方案1】：

您可以尝试触发提交按钮，在这种情况下应该运行 html5 验证：

const Form = () => {

    const handleSubmit = (e: any) => {
        e.preventDefault()        
        alert('submitted')
    }

    const handleChange = (e: any) => {
        const btn = document.getElementById('btnSubmit');
        btn.click();
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" required />
            <input type="checkbox" onChange={(e) => handleChange(e)} />
            <button id="btnSubmit" type="submit">Submit</button>
        </form>
    )
}

const root = document.getElementById('root')
ReactDOM.render(<Form />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：