在提交时从给定的复选框中强制设置至少一个复选框

Question

我在表单组中有几个复选框。如何使这个感兴趣的复选框在提交时必须选中？至少用户在提交之前单击一个复选框。我用过反应靴。

任何帮助都是非常感谢的。

<Form.Group>
    <Form.Label>Area of Interest</Form.Label>
    <Form.Check
        name="areaOfInterest"
        label="Dedicated Teams"
        id="dt"
        value={"Dedicated Teams" || formInput.areaOfInterest}
        onChange={handleCheck}
    />
    <Form.Check
        name="areaOfInterest"
        label="Cloud Expert Advice &amp; Support"
        id="ceas"
        value="Cloud Expert Advice &amp; Support"
        onChange={handleCheck}
    />
    <Form.Check
        name="areaOfInterest"
        label="Software Development"
        id="sd"
        value="Software Development"
        onChange={handleCheck}
    />
    <Form.Check
        name="areaOfInterest"
        label="Digital Transformation"
        id="dit"
        value="Digital Transformation"
        onChange={handleCheck}
    />
</Form.Group>

Answer 1

在表单提交时，您可以检查是否存在选中的复选框，如果没有选中，则可以return false。

演示：

​

function submitForm(){
  if(!document.querySelector(':checked'))
    return false;
};

<form onsubmit="return submitForm()">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br>
  
  <button>Submit</button>
</form>

​

Answer 2

在提交表单之前，您可以简单地检查一下areaOfInterest是否对它有任何价值。如果没有，向用户显示一个错误，告诉他们这是强制性的。如果areaOfInterest甚至有一个响应，让表单提交。

Answer 3

取决于你如何处理状态。我假设您正在以某种方式保存复选框的状态，比如数组或对象。这样做的一种方法是创建一个函数来检查复选框的状态。如果是空的，可以禁用、保存或发送错误消息。