Делать хотя бы один флажок обязательным из указанных флажков при отправке - PullRequest
Новая
       1

Делать хотя бы один флажок обязательным из указанных флажков при отправке

0 голосов
/ 20 февраля 2020

У меня есть несколько флажков внутри группы форм. Как я могу сделать этот флажок Область интересов обязательным при отправке? По крайней мере, пользователь нажимает один флажок перед отправкой. Я использовал ответ- bootstrap.

Любая помощь приветствуется. 

<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>

Ответы [ 3 ]

1 голос
/ 20 февраля 2020

В форме отправить вы можете проверить наличие флажок , если нет ни одного проверенного, вы можете 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>
0 голосов
/ 20 февраля 2020

Зависит от того, как вы обрабатываете состояние. Я предполагаю, что вы как-то сохраняете состояние флажка, как массив или объект. Один из способов сделать это - создать функцию для проверки состояния флажка. Если он пуст, вы можете отключить сохранение или отправить сообщение об ошибке.

0 голосов
/ 20 февраля 2020

Вы можете просто проверить перед отправкой формы, имеет ли areaOfInterest какое-либо значение для него или нет. Если это не так, покажите пользователю ошибку, сообщив ему, что это обязательно. Если у areaOfInterest есть хотя бы один ответ, пусть форма отправится.

...