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

Question

查看等帖子，我了解了如何验证选中框的数量。

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

编辑。上下文：输入是用户的家庭、工作和移动 phone。复选框是 "call me at home"、"call me at work" 和 "call my mobile phone"。它们是复选框而不是单选框，因此，如果用户选中多个复选框，他们将得到多个响应。

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

如何实现？

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;
    }
  });

});

Answer 1

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

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

但是，当一组复选框或单选元素共享相同的 name 时，它们将被视为表单的单个数据点。示例：当设置分组为required时，则至少需要勾选一个

如果您希望使用自定义规则单独考虑每个问题，则没有解决方法。命名必须指定为 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 对象：

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

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

Validating individual checkboxes with jQuery validator

javascript

jquery

jquery-validate