使用jQuery验证器验证各个复选框

Looking at posts such as https://*.com/a/15453130/1032531, I see how I can validate the quantity of checked boxes.

看看https://*.com/a/15453130/1032531这样的帖子,我看看如何验证复选框的数量。

Instead, I wish to validate checkboxes based on some other criteria such as whether another input is filled out.

相反,我希望根据其他一些标准验证复选框,例如是否填写了另一个输入。

EDIT. Context: Inputs are users home, work, and mobile phone. Checkboxes are "call me at home", "call me at work", and "call my mobile phone". They are checkboxes and not radioboxes, and as such, the user will get multiple responses if they check multiple checkboxes.

编辑。背景:输入是用户家庭,工作和移动电话。复选框是“给我打电话”,“打电话给我工作”,“打电话给我的手机”。它们是复选框而不是radioboxes,因此,如果用户检查多个复选框,则会收到多个响应。

I've put together the following, however, it appears that jQuery Validator only looks at the first element of a given name. I can probably change the names to be unique instead of using the [], however, I wish the elements to be posted to the server as an array.

我把以下内容放在一起,然而,似乎jQuery Validator只查看给定名称的第一个元素。我可以将名称更改为唯一而不是使用[],但是,我希望元素作为数组发布到服务器。

How can this be accomplished?

如何实现这一目标?

http://jsfiddle.net/suu44yng/

<p>one:
  <input id="one" type="text" value="foo" />
</p>
<p>two:
  <input id="two" type="text" />
</p>
<p>three:
  <input id="three" type="text" value="bar" />
</p>
<hr>

<form id="myform">
  <p>
    <input type="checkbox" name="test[]" value="1" checked data-check="one" />One</p>
  <p>
    <input type="checkbox" name="test[]" value="2" checked data-check="two" />Two</p>
  <p>
    <input type="checkbox" name="test[]" value="3" checked data-check="three" />Three</p>
  <p>
    <input type="submit" />
  </p>
</form>

(function() {
  $.validator.addMethod("checkboxes", function(value, element, params) {
      console.log(this, value, element, params);
      console.log($(element).data('check'), $('#' + $(element).data('check')).val());
      console.log(!$('#one').val(),!$('#two').val(),!$('#three').val());
      var error = false;
      if (value == 1 && !$('#one').val()) {
        error = true;
      }
      else if (value == 2 && !$('#two').val()) {
        error = true;
      }
      else if (value == 3 && !$('#three').val()) {
        error = true;
      }
      console.log(error)
      if (error) {
        $(element).data('error', value);
        return false;
      } else {
        return true;
      }
    },
    function(params, element) {
      return $.validator.format('This checkbox is not allowed since ' + $(element).data('error') + ' is empty.')
    })
})();

$(document).ready(function() {

  $('#myform').validate({
    rules: {
      'test[]': {
        checkboxes: true
      }
    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});

1 个解决方案

#1

"I can probably change the names to be unique instead"

“我可能会改变名称,而不是”

That's exactly what you're going to have to do. This plugin uses the name attribute to keep track of input elements and if you have multiple input elements with the same name, only the first one will be considered for validation and the others are ignored.

这正是你将要做的。此插件使用name属性来跟踪输入元素,如果您有多个具有相同名称的输入元素,则只会考虑第一个用于验证,而忽略其他元素。

However, when you have a grouping of checkbox or radio elements sharing the same name, they are considered as a single data point for the form. Example: when setting the grouping to required, then at least one will need to be checked.

但是,当您具有共享相同名称的复选框或无线电元素的分组时,它们将被视为表单的单个数据点。示例:将分组设置为required时,至少需要检查一个。

There is no workaround if you want each one to be considered individually with a custom rule. Naming would have to be specified as test[1], test[2], etc.

如果您希望使用自定义规则单独考虑每个解决方法,则没有解决方法。命名必须指定为test [1],test [2]等。

<input type="checkbox" name="test[1]" value="1" checked data-check="one" />One
<input type="checkbox" name="test[2]" value="2" checked data-check="two" />Two
<input type="checkbox" name="test[3]" value="3" checked data-check="three" />Three

rules object:

rules: {
    'test[1]': {
        checkboxes: true
    },
    'test[2]': {
        checkboxes: true
    },
    'test[3]': {
        checkboxes: true
    }
},

#1