javascript - 带有自定义验证无限循环的选择元素数组上的 jQuery 验证器

Question

我有一个fiddle here与我的问题。

我在表单中有一系列选择，全部名称为 player[]。我想检查这些:

1. 全部必需
2. 至少有 2 个 item.val() !== "none"
3. 至少一个item.text() === "me"

我的验证器自定义规则是:

var form = $("#player_form");

$.validator.addMethod(
  "minPlayers",
  function(value, element, requiredValue) {
    var noPlayerCount = 0;
    $("[id^=player-]").each(function(i) {
      if (($(this).find('option:selected').val() !== 'none') && ($(this).find('option:selected').val() !== '')) {
        noPlayerCount++;
      }
    });
    if (noPlayerCount < requiredValue) {
      return false;
    }
    return true;
  },
  "You need more than 1 player for a game"
);

$.validator.addMethod(
  "mePlayer",
  function(value, element, requiredValue) {
    var meCount = 0;
    $("[id^=player-]").each(function(i) {
      if ($(this).find('option:selected').text() === 'me') {
        meCount++;
      }
    });
    if (meCount !== requiredValue) {
      return this.check($('#player-1'));
    }
    return this.valid();
  },
  "You need to be in the game"
);

form.validate({
  rules: {
    game_name: {
      required: true,
      maxlength: 14
    },
    difficulty: {
      required: true
    },
    'player[]': {
      required: true,
      minPlayers: 2,
      mePlayer: 1
    }
  },
  messages: {
    game_name: {
      required: "Name your game",
      minlength: $.validator.format("Your game name can be a max of {0} chars")
    },
    difficulty: {
      required: "Please select a difficulty"
    },
    'player[]': {
      required: "A player cannot be blank"
    }
  },
  submitHandler: function(form) {
    alert("SUBMITTED!");
    return false;
  }
});

此代码遇到无限循环/最大堆栈大小。我错过了什么？谢谢!

Answer 1

我修复了一些问题...

在 HTML 中: selected='' 不好。该属性是一个 bool 值。缺失，为假，存在为真...并且可以设置为true/false，但不能为空。

在 JS 中:

$("[id^=player-]").each(function(i) { 循环所有具有 id 从 player- 开始的元素。您有 8 个 player-n 和 8 个 player-nickname-n。所以总共有 16 个玩家。

当检查选项的文本时，例如 if ($(this).find('option:selected').text() === 'me') {，如果文本是“Me ”，它返回 false。这是区分大小写的。

最后，无论您在作为第二个参数提供给 .addMethod 的函数中做什么，它都必须返回 true 或 false。尝试返回其他内容会导致无限循环......不要问我到底为什么。

所以这是你的代码已修复，我留下了用于调试的所有控制台日志。

var form = $("#player_form");

$.validator.addMethod(
  "minPlayers",
  function(value, element, requiredValue) {
  console.log("requiredValue1: "+requiredValue);
    var noPlayerCount = 0;
    $("[id^=player-]").each(function(i) {
      console.log ("option value: "+$(this).find('option:selected').val());

      if (($(this).find('option:selected').text() !== 'None')){ //} && ($(this).find('option:selected').val() !== '')) {
        noPlayerCount++;
      }
    });

    console.log("noPlayerCount: "+noPlayerCount);
    if (noPlayerCount < requiredValue) {

      return false;
    }
    return true;
  },
  "You need more than 1 player for a game"
);

$.validator.addMethod(
  "mePlayer",
  function(value, element, requiredValue) {
  console.log("requiredValue2: "+requiredValue);
    var meCount = 0;
    $("[id^=player-]").each(function(i) {
      if ($(this).find('option:selected').text() === 'Me') {    // Capital "M"
        meCount++;
      }
    });
    if (meCount !== requiredValue) {
      return false; //this.check($('#player-1'));     // Validator must return true or false.
    }
    return true;  //this.valid();                     // Validator must return true or false.
  },
  "You need to be in the game"
);

form.validate({
  rules: {
    game_name: {
      required: true,
      maxlength: 14
    },
    difficulty: {
      required: true
    },
    'player[]': {
      required: true,
      minPlayers: 2,
      mePlayer: 1
    }
  },
  messages: {
    game_name: {
      required: "Name your game",
      minlength: $.validator.format("Your game name can be a max of {0} chars")
    },
    difficulty: {
      required: "Please select a difficulty"
    },
    'player[]': {
      required: "A player cannot be blank"
    }
  },
  submitHandler: function(form) {
    alert("SUBMITTED!");
    return false;
  }
});

$("#my_button").click(function() {
  var form = $("#ajax_login_form");
  form.validate();
})

Updated Fiddle