Javascript 使用jquery表单中的输入筛选所有可见列表

我正在开发表单

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

复选框的过滤器：最少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');
});

const max=5；
常数min=1；
常量MinCheckedCheckBox=1；
$（'input.checkbox'）。在（'click'，函数（evt）上{
常量复选框=$（this）.closest（'.cd表单列表内部'）.find（'input:checked'）；
如果（复选框.长度>最大值）{
警报（“您只能选择5个复选框”）；
返回false；
}
});
$（'.next'）。单击（函数（）{
让错误=错误；
$（['input[required]：visible'，'textarea[required]：visible']）。每个（函数（索引、选择器）{
$（选择器）。每个（函数（索引、输入）{
error=error==true？错误：$（输入）.val（）=''；
});
});
$（'.parent:visible'）。每个（函数（索引，组）{
如果（错误==true）{
错误=错误；
}
否则{
错误=$（'input:checked'，group）.length

---

这里是

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

在所有需要的输入上循环

循环时检查输入类型，相应地创建了添加错误类的条件，还维护了需要添加错误类的

elem

然后，如果

条件

为真，则将

错误

类添加到

元素

const max=5；
常数min=1；
$（'.next'）。单击（函数（）{
$（'input[required]：visible，textarea[required]：visible，input[type=“checkbox”]：visible'）。每个（函数（索引，选择器）{
var-elem；
if（$（this）.is（“：复选框”）| |$（this）.is（“：radio”））{
var pDiv=$（this.parents（“div”）.first（）；
var条件=假；
elem=pDiv；
if（$（this）.is（“：radio”））{
条件=pDiv.find（“[type='radio']：选中”）。最大长度；
}
}否则{
条件=！$（this.val（）；
elem=$（本）；
}
如果（条件）{
元素addClass（“错误”）；
}否则{
elem.removeClass（“错误”）；
}
});
});
。错误{
背景颜色：粉红色；
边框颜色：红色；
}

按下按钮

这个div应该是红色的

这个div不应该是红色的

这个div不应该是红色的

这个div不应该是红色的

这个div不应该是红色的

这个div应该是红色的

下一页
是啊！多谢各位！