Блог

Главная - Вопросы по программированию - Требуется, чтобы с помощью JavaScript было установлено не менее 2 флажков

Требуется, чтобы с помощью JavaScript было установлено не менее 2 флажков

#javascript #html #forms #checkbox #required

#javascript #HTML #формы #флажок #требуется

Вопрос:

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

 function cb_require() {
  let chckbx = document.forms['form_name']['contact'].value;

  for (chckbx.length === 1) {
    if (i = 0; i < chckbx.length; i  ) {
      alert('check 2');
      return false;
    }
  }
} 
 <form method="post" name="form_name" id="form_name" action="mailto:bb@yahoo.com" enctype="text/plain" onsubmit="return cb_require()">
  <label for="cont">Preferred Contact Method:</label>
  <input type="checkbox" id="Phone" name="contact" value="Phone">
  <label for="Phone">Phone</label>
  <input type="checkbox" id="E-mail" name="contact" value="E-email">
  <label for="E-mail">E-mail</label><br>
  <input type="checkbox" id="Mail" name="contact" value="Mail">
  <label for="Mail">Mail</label>
  <input type="checkbox" id="LinkedIn" name="contact" value="LinkedIn">
  <label for="LinkedIn">LinkedIn</label><br><br>
</form>

Заранее спасибо за любую помощь или совет!

Ответ №1:

Вы можете просто использовать querySelectorAll только для фильтра checkbox checked , если length равно двум submit формам, таким как:

 const form = document.querySelector('#form_name');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  let chckboxs = form.querySelectorAll('input[type="checkbox"]:checked');
  if (chckboxs.length > 1) {
    console.log('form submit');
  } else {
    console.log('error form');
  }
}); 
 <form method="post" name="form_name" id="form_name" action="mailto:bb@yahoo.com" enctype="text/plain">
  <label for="cont">Preferred Contact Method:</label>
  <input type="checkbox" id="Phone" name="contact" value="Phone">
  <label for="Phone">Phone</label>
  <input type="checkbox" id="E-mail" name="contact" value="E-email">
  <label for="E-mail">E-mail</label><br>
  <input type="checkbox" id="Mail" name="contact" value="Mail">
  <label for="Mail">Mail</label>
  <input type="checkbox" id="LinkedIn" name="contact" value="LinkedIn">
  <label for="LinkedIn">LinkedIn</label><br><br>
  <button type="submit">ClickMe</button>
</form>

Ссылка:

Комментарии:

1. спасибо за помощь. Мне пришлось изменить console.log() на alert(), это показывает, что функция работает. Однако при отправке форма фактически не будет отправлена через атрибут mailto: в теге формы HTML. Есть ли способ исправить эту проблему?

2. Мой был просто примером, вам просто нужно отправить его вручную, например form.submit();

3. Вы тестировали мой код?

Метки: ,