Question

尝试验证多格式数据。如果选中了“ a”类，则必须检查“ b”类是否为空。

c = 1;
d = 1;
$('.a').each(function() {
  if ($(this).is(':checked')) {
    $('.b').each(function() {
      if ($(this).val() == '') {
        err += "<p>Value Empty at row +c+</p>";
        return false;
      }
      d = d + 1;
    });
  }
  c = c + 1;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" class="a" name="a[]" value="Value" />&nbsp;Value</label><br> <input type="text" class="b" name="b[]" />

问题是，它可以完美验证第一种形式。当涉及第二种形式时，它将检查类“ b”的第一个值，而不是检查类“ b”的第二个值

Answer 1

您不希望.b循环内的.a循环。您需要一个循环处理这两个循环：

var checkboxes = $(".a");
var textboxes  = $(".b");
for (var n = 0; n < checkboxes.length; ++n) {
    if (checkboxes[n].checked && !textboxes[n].value.trim()) {
        err += "<p>Value Empty at row " + n + "</p>";
    }
}

实时示例：

$("#btn").on("click", function() {
  var err = "";
  var checkboxes = $(".a");
  var textboxes  = $(".b");
  for (var n = 0; n < checkboxes.length; ++n) {
      if (checkboxes[n].checked && !textboxes[n].value.trim()) {
          err += "<p>Value Empty at row " + n + "</p>";
      }
  }
  $("#err").html(err);
});

<label><input type="checkbox" class="a" name="a[]" value="Value" />&nbsp;Value</label><br> <input type="text" class="b" name="b[]" />
<br>
<label><input type="checkbox" class="a" name="a[]" value="Value" />&nbsp;Value</label><br> <input type="text" class="b" name="b[]" />
<br>
<label><input type="checkbox" class="a" name="a[]" value="Value" />&nbsp;Value</label><br> <input type="text" class="b" name="b[]" />
<br>
<input type="button" id="btn" value="Check">
<div id="err"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

一些注意事项：

使用[n]索引到jQuery对象时，将在该位置获得原始DOM元素。当您拥有raw元素时，不需要.is(":checked")，只需在元素本身上使用checked属性即可。（因此：checkboxes[n].checked而不是$(checkboxes[n]).is(":checked")或checkboxes.eq(n).is(":checked")。）
类似地，input元素具有自己的value属性，无需仅将它们包装在jQuery对象中即可调用val()。
我的上面的代码假定仅包含空格的输入应被视为空。它使用{5}（在ES5（2009）中引入）来完成。如果您需要支持像IE8这样的过时浏览器，则可能需要使用polyfill。

Answer 2

使用代码时

$(".b")...

它检查所有带有类b的输入，但是您只想要相关的输入。关键是确定它们之间的关联方式。可以是它们在父div中，也可以使用data-属性进行匹配，也可以只是“下一个”输入。

您的示例HTML仅显示.a和.b的一个“对”，因此，如果我们将该对扩展为多个对，例如分组为“ group” div，则可以使用{{ 1}}，然后在该div中找到包含的.closest(".group")，然后找到相关的div：

.b

$("#validate").click(function() {

  var c = 1;
  var d = 1;
  var err = "";
  $('.a').each(function() {
    if ($(this).is(':checked')) {
      // only find the related `.b`
      //$('.b').each(function() {
      $(this).closest(".group").find(".b").each(function() {
        if ($(this).val() == '') {
          err += "<p>Value Empty at row " + c + "</p>";
          return false;
        }
        d = d + 1;
      });
    }
    c = c + 1;
  });
  console.log("c:", c, "d:", d, err);
});

Answer 3

在执行$('.b').each(function(){})时，它会/每次都找到类.b的所有元素。因此，再次检查第一个元素。

一种解决方案是先查找所有元素，然后运行循环并使用索引查找元素

as = $(".a");
bs = $(".b");

for(var i = 0; i < as.length; i++){
  a = as[i];
  b = bs[i];
  if($(a).is(':checked')){
    if($(b).val() === ''){
      err += "<p>Value Empty at row +c+</p>";
      return false;
    }
  }
}

或以这样一种方式来构造标记a：将所有类别为a和b的相关元素放入div中。您可以找到所有.a，在循环时，您会在父div中找到所有.b

<div class='wrapper-related-fields'>
  <label><input type="checkbox" class="a" name="a[]" value="Value" />&nbsp;Value</label>
  <br>
  <input type="text" class="b" name="b[]" />
</div>

$('.a').each(function(){
  if($(this).is(':checked')){
    // Find the parent wrapper
    wrapper = $(this).closest(".wrapper-related-fields");

    // find all the .b elements inside wrapper
    $(warpper).find('.b').each(function(){
      if($(this).val() == '')
      {
        err += "<p>Value Empty at row +c+</p>";
        return false;
      }
      d = d + 1;
    });
  }
  c = c + 1;
});

尝试验证循环内的值

3 个答案: