过滤所有具有jquery格式输入的可见列表

Question

我正在发展形式。

我需要的是当用户试图使用空的可见字段/复选框/收音机转到另一个页面时，这些字段/复选框/收音机应该变成红色。

复选框的筛选器:最小1，最多5。

我的jQuery

const max = 5;
const min = 1;
const minCheckedCheckboxes = 1;

$('input.checkbox').on('click', function(evt) {
  const checkboxes = $(this).closest('.cd-form-list-inner').find('input:checked');

  if(checkboxes.length > max) {
    alert('You can select only 5 checkboxes');
    return false;
  }
});

$('.next').click(function() {
    let error = false;
    $(['input[required]:visible', 'textarea[required]:visible']).each(function(index, selector) {                
        $(selector).each(function(index, input) {
            error = error == true ? error : $(input).val() == '';
        });
    });

    $('.parent:visible').each(function(index, group){
        if(error == true) {
            error = error;
        }
        else {
            error = $('input:checked', group).length < minCheckedCheckboxes;                
        }
    });


    if(error == false) {
        error =! $('input[type=radio]:required').is(':checked');
    }


    if(error) {
        $('input[required]:visible, textarea[required]:visible').removeClass("error");
        $('input[required]:visible, textarea[required]:visible').filter(function() {
            return !this.value;
        }).addClass('error');
        return alert('Not all required fields are filled');
        }
    alert('All required fields are filled');
});

这是jsFiddle

Answer 1

检查下面的代码是否适合您！

1. 在所有想要的输入上循环。
2. 在循环时检查输入类型，相应地创建添加错误类的条件，并维护需要在其中添加error类的error。
3. 如果condition为true，则将error类添加到elem中。

​

const max = 5;
const min = 1;

$('.next').click(function() {


  $('input[required]:visible,textarea[required]:visible,input[type="checkbox"]:visible').each(function(index, selector) {

    var elem;
    if ($(this).is(":checkbox") || $(this).is(":radio")) {

      var pDiv = $(this).parents("div").first();
      var condition = false;
      elem = pDiv;
      if ($(this).is(":radio")) {
        condition = pDiv.find("[type='radio']:checked").length <= 0
      } else {

        condition = pDiv.find("[type='checkbox']:checked").length < min || pDiv.find("[type='checkbox']:checked").length > max;
      }

    } else {
      condition = !$(this).val();
      elem = $(this);
    }

    if (condition) {
      elem.addClass('error');
    } else {
      elem.removeClass('error');
    }
  });
});

.error {
  background-color: pink;
  border-color: red;
}

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

<p>press button</p>
<input type="text" required/>
<input type="text" required style="display: none" />
<div>
  <textarea cols="5" required placeholder="textarea"></textarea>
</div>
<div>
  <textarea cols="5" required placeholder="textarea" style="display:none"></textarea>
</div>
<div class="parent">
  <p>this div should be red</p>
  <div>
    <input type="radio" required>
  </div>
</div>
<div class="parent" display: none>
  <p>this div shouldn't be red</p>
  <div>
    <input type="radio" checked required>
  </div>
</div>
<div style="display:none">
  <p>this div shouldn't be red</p>
  <input type="radio" required>
</div>
<div class="parent">
  <p>this div shouldn't be red</p>
  <div class="cd-form-list-inner checkboxes">
    <input type="checkbox" class="checkbox" checked>
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
  </div>
</div>
<div class="parent" style="display: none;">
  <p>this div shouldn't be red</p>
  <div class="cd-form-list-inner checkboxes">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
  </div>
</div>
<div class="parent">
  <p>this div should be red</p>
  <div class="cd-form-list-inner checkboxes">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
    <input type="checkbox" class="checkbox">
  </div>
</div>
<div>
  <button class="next">Next page</button>
</div>

​