选择输入的自定义复杂表单验证

时间:2014-08-12 11:14:51

标签: jquery html5

我有一个包含10个选择菜单的表单,使用户可以安排2个团队之间的传奇联盟。 为团队A选择5个菜单,为团队B选择5个选择菜单。 每个选择包含4组5个玩家,如下所示:

<select name="teamA_first" id="teamA_first" class="team_A">
    <option value="0">select</option>
    <optgroup label="group1"></optgroup>
        <option data-guild="1" value="1">player 1</option>
        <option data-guild="1" value="2">player 2</option>
        <option data-guild="1" value="3">player 3</option>
        <option data-guild="1" value="4">player 4</option>
        <option data-guild="1" value="5">player 5</option>
    <optgroup label="group2"></optgroup>
        <option data-guild="2" value="6">player 6</option>
        <option data-guild="2" value="7">player 7</option>
        <option data-guild="2" value="8">player 8</option>
        <option data-guild="2" value="9">player 9</option>
        <option data-guild="2" value="10">player 10</option>
    <optgroup label="group3"></optgroup>
        <option data-guild="3" value="11">player 11</option>
        <option data-guild="3" value="12">player 12</option>
        <option data-guild="3" value="13">player 13</option>
        <option data-guild="3" value="14">player 14</option>
        <option data-guild="3" value="15">player 15</option>
    <optgroup label="group4"></optgroup>
        <option data-guild="4" value="16">player 16</option>
        <option data-guild="4" value="17">player 17</option>
        <option data-guild="4" value="18">player 18</option>
        <option data-guild="4" value="19">player 19</option>
        <option data-guild="4" value="20">player 20</option>        
</select>

我想验证表格如下:

每个小组必须至少包含一个来自每个小组的玩家。

例如,A队必须至少包含一个来自group1的玩家,一个来自group2,一个来自group3,一个来自group4。

B队也是如此。

我制作了一个解决了这个问题的功能,但我认为它可以更加优化:

$( "#addMatchForm" ).submit(function( event ) {
        var $inputs_a = $('#addMatchForm :input.team_A');
        var $inputs_b = $('#addMatchForm :input.team_B');

        var values_a = [];
        var values_b = [];
        $inputs_a.each(function(index, value) {
            values_a[index] = $(this).find(':selected').data('guild');
        });
        $inputs_b.each(function(index, value) {
            values_b[index] = $(this).find(':selected').data('guild');
        });

        var g1 = 1;
        var g2 = 2;
        var g3 = 3;
        var g4 = 4;
        //count guilds occurences on team A selects
        var a_occ1 = $.grep(values_a, function (elem , i) {
            return elem == g1;
        }).length;
        var a_occ2 = $.grep(values_a, function (elem , i) {
            return elem == g2;
        }).length;
        var a_occ3 = $.grep(values_a, function (elem , i) {
            return elem == g3;
        }).length;
        var a_occ4 = $.grep(values_a, function (elem , i) {
            return elem == g4;
        }).length;

        //count guilds occurences on team B selects
        var b_occ1 = $.grep(values_b, function (elem , i) {
            return elem == g1;
        }).length;
        var b_occ2 = $.grep(values_b, function (elem , i) {
            return elem == g2;
        }).length;
        var b_occ3 = $.grep(values_b, function (elem , i) {
            return elem == g3;
        }).length;
        var b_occ4 = $.grep(values_b, function (elem , i) {
            return elem == g4;
        }).length;

        var error = false ;
        if(a_occ1 < 1){
            error = true ;
            alert('No players from team 沖縄のトラ selected on Team A! You must at least choose one player from each team .');
        }
        if(a_occ2 < 1){
            error = true ;
            alert('No players from team Ozone Rampage selected on Team A! You must at least choose one player from each team .');
        }
        if(a_occ3 < 1){
            error = true ;
            alert('No players from team Rascal Jester selected on Team A! You must at least choose one player from each team .');
        }
        if(a_occ4 < 1){
            error = true ;
            alert('No players from team DetnatioN FM selected on Team A! You must at least choose one player from each team .');
        }
        if(b_occ1 < 1){
            error = true ;
            alert('No players from team 沖縄のトラ selected on Team B! You must at least choose one player from each team .');
        }
        if(b_occ2 < 1){
            error = true ;
            alert('No players from team Ozone Rampage selected on Team B! You must at least choose one player from each team .');
        }
        if(b_occ3 < 1){
            error = true ;
            alert('No players from team Rascal Jester selected on Team B! You must at least choose one player from each team .');
        }
        if(b_occ4 < 1){
            error = true ;
            alert('No players from team DetnatioN FM selected on Team B! You must at least choose one player from each team .');
        }

        if(error){
            return false;
        }else{
            return true;
        }       

    });

有什么想法吗? 谢谢

0 个答案:

没有答案