表单验证“必需”不起作用答案

【问题标题】：form validation ''required' is not working表单验证“必需”不起作用
【发布时间】：2020-12-24 16:08:18
【问题描述】：

我在输入字段中使用了必需 corm 验证，我不想提交带有空字段的表单。我的必需表单验证不起作用。

function AddCar() {
   const [chasis, setChasis] = useState("");    
   const [model, setModel] = useState("");      
   const [engine, setEngine] = useState("");          
    
   const addCar = (e) => {
         e.preventDefault();
         console.log("submint");
   };
    
   return (
        <div className="addCar">
          <h1>Add Car Record</h1>      
          
          <div className="addCar__form">
            <form>
              {/* Date */}
              <div>
                <label>Chasis No</label>
                <input
                  type="text"
                  value={chasis}
                  onChange={(e) => setChasis(e.target.value)}
                  required
                />
              </div>
              <div>
                {" "}
                <label>Model No</label>
                <input
                  type="text"
                  value={model}
                  onChange={(e) => setModel(e.target.value)}
                  required
                />
              </div>
              <div>
                <label>Engine No</label>
                <input
                  type="text"
                  value={engine}
                  onChange={(e) => setEngine(e.target.value)}
                  required
                />
              </div>
    
              <button type="submit" onClick={addCar} className="btn btn-primary">
                ADD CAR
              </button>
            </form>
          </div>
        </div>
      );
    }
    
    export default AddCar;

我不希望我的表单由空字段提交

【问题讨论】：

标签： html reactjs react-hooks

【解决方案1】：

你应该使用 onSubmit 而不是 onClick

<form onSubmit={addCar} >

 ....
<button type="submit" className="btn btn-primary">
    ADD CAR
</button>

</form>

【讨论】：

【解决方案2】：

您的按钮缺少属性“value”，即 value="submit"

 <button type="submit" value="submit" onClick={addCar} className="btn btn-primary">
  ADD CAR
 </button>

【讨论】：

按钮中Value的作用是什么？