Question

我正在开发表格。

我需要的是当用户试图转到另一个空的可见字段/复选框/无线电时，这些字段/复选框/无线电应该变为红色。

复选框的过滤条件：min 1，max 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

检查以下代码是否适合您！

循环播放所有需要的输入。
在循环时检查输入类型，相应地创建了添加错误类的条件，同时保留了需要添加let hex: String = "ABC".unicodeScalars.filter { $0.isASCII } .map { String(format: "%X", $0.value) } .joined() print(hex) // correctly yields 414243类的elem。
如果error为真，则将condition课程添加到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;
}

使用表单jquery中的输入过滤所有可见列表

1 个答案: