Как использовать Javascript / JQuery, чтобы убедиться, что по крайней мере два поля в флажке выбраны?

Question

Я пытаюсь создать код подтверждения Javascript для формы, чтобы каждый элемент формы проверялся после нажатия кнопки «отправить». У меня возникают проблемы при написании кода, чтобы в разделе «Флажки» формы проверялось, что выбраны два или более полей. Я попытался начать с простого написания кода, чтобы div, errorcheckbox, отображал сообщение, если флажок вообще не установлен. Однако это не работает. Вот HTML-код и сценарий для кода, относящегося к флажку:

HTML:

  <form action="#" method="POST">
    <div class="contactForm">
      <label for="checkbox" id="checkbox" name="checkbox">Contactee Type: </label><br>
      <div id="errorcheckbox" class="error"></div>
      <input type="checkbox" name="type1" value="Individual">Individual<br>
      <input type="checkbox" name="type2" value="Catering">Business:Catering<br>
      <input type="checkbox" name="type3" value="Partner">Business:Partner<br>
    </div>

    <div class="button"><input type="button" name="submit" id="submit" value="Submit"></div>

  </form>

и Javascript:

    $("document").ready(function(){
      console.log("Loaded");
      $("#submit").click(function(){
        checkContactee();
      });

    $("#checkbox").change(function(){
      console.log("Something in contactee changed");
      checkContactee();
    });

    function checkContactee(){
      if (document.getElementById("checkbox").checked == false){
        $("#errorcheckbox").html("<p>You missed this field</p>");
        $("#errorcheckbox").addClass("showerror");
      }
      else{
        $("#errorregarding").html("");
        $("#errorregarding").removeClass("showerror");
      }
    }

Сейчас код выполняетничего. Элемент errorcheckbox div не отображается, и в журнале консоли не происходит никаких изменений, если установлен флажок. Итак, это одна проблема, с которой я столкнулся. Мне все еще нужно убедиться, что два или более флажков отмечены. Я надеюсь сделать это, добавив оператор if else в функцию checkContactee, но не знаю, как.

Answer 1

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

. Обернув флажки в наборе полей, мы можем затем использовать это как часть проверкипроцесс.

$("document").ready(function() {
  console.log("Loaded");
  $("fieldset[data-mincheckboxchecked] [type=checkbox]").on("click", function() {
    console.log("Click")
    //Get the parent fieldset
    let $parent = $(this).closest("fieldset[data-mincheckboxchecked]");
    validateMultiCheckBox($parent);

  });
});

function validateMultiCheckBox($parent) {
  console.log($parent)
  //Get minimum checked from the data attribute
  let minCheked = $parent.data("mincheckboxchecked");
  minChecked = parseInt(minCheked, 10);

  //Get the number of checked checkboxes in the parent
  let numCheked = $parent.find("[type=checkbox]:checked").length;

  //Validation Logic
  if (numCheked < minCheked) {
    $parent.find(".error").html("<p>Please select at least " + minChecked + " option" + (minCheked !== 1 ? "s" : "") + "</p>");
    $parent.find(".error").addClass("showerror");
    return false;
  } else {
    $parent.find(".error").html("");
    $parent.find(".error").removeClass("showerror");
    return true;
  }
}

$("#submit").click(function() {
  var isValid = false;
  var multiCheckValid = true;

  //Validate each group of multi checkboxes
  $("fieldset[data-mincheckboxchecked]").each(function() {
    console.log(this);
    if (!validateMultiCheckBox($(this))) {
      multiCheckValid = false;
    }
  })

  //Normally you'e set this to return false, leaving like 
  //this for demo purposes
  console.log(multiCheckValid);
  return isValid;
});

.error {
  display: none;
  color: red;
}

.error.showerror {
  display: block;
}

fieldset label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST">
  <div class="contactForm">
    <fieldset data-mincheckboxchecked="2">
      <legend>Contactee Type: </legend>

      <div id="errorcheckbox" class="error"></div>
      <label><input type="checkbox" name="contactType" value="Individual">Individual</label>
      <label><input type="checkbox" name="contactType" value="Catering">Business:Catering</label>
      <label><input type="checkbox" name="contactType" value="Partner">Business:Partner</label>
    </fieldset>

    <fieldset data-mincheckboxchecked="1">
      <legend>One Required: </legend>

      <div id="errorcheckbox" class="error"></div>
      <label><input type="checkbox" name="oneReq" value="1">A Thing</label>
      <label><input type="checkbox" name="oneReq" value="2">Another Thing</label>
      <label><input type="checkbox" name="oneReq" value="3">Yet another thing</label>
    </fieldset>

    <fieldset data-mincheckboxchecked="3">
      <legend>Top 3 Movies: Three required</legend>

      <div id="errorcheckbox" class="error"></div>
      <label><input type="checkbox" name="movie" value="Top Gun">Top Gun</label>
      <label><input type="checkbox" name="movie" value="Terminator">Terminator</label>
      <label><input type="checkbox" name="movie" value="Sound Of Music">Sound OF Music</label>
      <label><input type="checkbox" name="movie" value="Mission Impossible">Mission Impossible</label>
    </fieldset>

  </div>

  <div class="button"><input type="button" name="submit" id="submit" value="Submit"></div>

</form>

Таким образом, он расширяется и не зависит от идентификаторов.

Answer 2

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

$("document").ready(function(){
      console.log("Loaded");
      $("#submit").click(function(){
        checkContactee();
      });

    $("input[type='checkbox']").change(function(){
      console.log("Something in contactee changed");
      checkContactee();
    });

    function checkContactee(){
      if ($("input[type='checkbox']").is(':checked'){
        $("#errorcheckbox").html("<p>You missed this field</p>");
        $("#errorcheckbox").addClass("showerror");
      }
      else{
        $("#errorregarding").html("");
        $("#errorregarding").removeClass("showerror");
      }
    }

Answer 3

var checkedCount=$("input[name^='type']:checked).length - эта команда извлекает все входные данные, ищет те, чье имя начинается с «type», сохраняет проверенные и возвращает количество проверенных (здесь, назначенных переменной checkedCount). Я оставлю дальнейшую проверку / выговор пользователя до вас

Answer 4

Вы можете использовать :checked, который селектор, чтобы получить отмеченные элементы.

function validate() {
  console.log('Total Checked = ' + $('.contactForm input[type="checkbox"]:checked').length);
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="contactForm">
  <label for="checkbox" id="checkbox" name="checkbox">Contactee Type: </label><br>
  <div id="errorcheckbox" class="error"></div>
  <input type="checkbox" name="type1" value="Individual">Individual<br>
  <input type="checkbox" name="type2" value="Catering">Business:Catering<br>
  <input type="checkbox" name="type3" value="Partner">Business:Partner<br>
  <button onclick="validate()">Validate</button>
</div>