與自定義驗證無限循環選擇元素數組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=''不好。這個屬性是一個布爾值。缺失，這是錯誤的，現在它是真實的......可以設置爲真/假，但不能爲空。

在JS：

$("[id^=player-]").each(function(i) {環具有id通過player-開始的所有元素。您有8 player-n和8 player-nickname-n。所以它數到了16名球員。

當檢查選項的文本如if ($(this).find('option:selected').text() === '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