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

Question

<input type="checkbox" name="category" value="Restorative"><label for="">Restorative</label>
<br>
<input type="checkbox" name="category" value="Esthetics"><label for="">Esthetics</label>
<br>
<input type="checkbox" name="category" value="Implants"><label for="">Implants</label>

Все флажки относятся к отправке значения в базу данных. Пользователь должен выбрать хотя бы один

Восстановительная
эстетика
Имплантаты

Как мне добиться этого, не используя опцию выбора?

Answer 1

Вы можете отменить отправку события с помощью event.preventDefault().Затем выполните итерацию по флажкам, и если хотя бы один из них отмечен: checkboxObj.checked, то отправьте форму: formObj.submit().Но если ничего не проверено - выведите уведомление об ошибке.

---

Демо

Подробности прокомментированы в демо

// Reference the form
var form = document.forms[0];

// Register the form to the submit event
form.onsubmit = validate;

/*
Called on submit event...
Prevent the form from submitting
Reference all form controls in form
Collect all [name=category] into an array
Iterate through the [name=category]
If one of them is checked submit the form
Otherwise reveal the error notification
*/
function validate(e) {
  e.preventDefault();
  var ui = this.elements;
  var chx = Array.from(ui.category);
  for (let c of chx) {
    if (c.checked) {
      this.submit();
    }
  }
  ui.req.style.display = 'block';
}

:root {
  font: 400 16px/1 Consolas
}

input,
label {
  display: inline-block;
  font: inherit;
  height: 1.5rem;
  line-height: 1.5rem;
  vertical-align: middle
}

[type=submit] {
  float: right
}

#req {
  display: none;
  position: relative;
  z-index: 1;
  background: #fed;
  width: 200px;
  padding: 10px;
  bottom: 100px;
  left: 175px;
  text-align: center;
}

<form id='form'>
  <fieldset>
    <input id='res' name="category" type="checkbox" value="Restorative">
    <label for="res">Restorative</label>
    <br>
    <input id='est' name="category" type="checkbox" value="Esthetics">
    <label for="est">Esthetics</label>
    <br>
    <input id='imp' name="category" type="checkbox" value="Implants">
    <label for="imp">Implants</label>
    <br>
    <input type='submit'>
  </fieldset>
  <output id='req'>Please check at least checkbox</output>
</form>

Answer 2

Вы можете легко сделать это, используя JavaScript! Все, что вам нужно, это добавить ID в нужные вам флажки, а затем связать его с помощью следующего кода JavaScript.

document.getElementById("myCheck").required = true;

увольняется при отправке формы.

Подробнее об этом можно узнать, нажав здесь.