Question

查看https://stackoverflow.com/a/15453130/1032531等帖子，我看到如何验证复选框的数量。

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

EDIT。背景：输入是用户家庭，工作和移动电话。复选框是“给我打电话”，“打电话给我工作”，“打电话给我的手机”。它们是复选框而不是radioboxes，因此，如果用户检查多个复选框，用户将获得多个响应。

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

如何实现这一目标？

<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

＆＃34;我可以将名称更改为唯一的＃34;

这正是你必须要做的。此插件使用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验证器验证各个复选框

1 个答案: