Validating the “select” dropdown before submitting

Question

On my page, there can be numerous select dropdown which need to be validated in certain way before I submit the page.

As an example, on a certain instance, there can be seven select dropdowns as follows.

What I want is that:-

if there are 5 or more "selects", exactly one should have 1 selected, exactly one should have 2, exactly one should have 3 and so on till 5. Remaining all of them should have 0 selected automatically.

and

if there are less than 5, exactly one should 1 selected, exactly one should have 2 selected and so forth till 4. This would depend upon how many "selects" are present on the page

What I did is below in JS. It's basically not much helpful :-(

HTML

<select name="first_select_0" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_1" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_2" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_3" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_4" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_5" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="first_select_6" class="select_style">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

JS

$("#submit-selection").click(function(e){
        var count_selects = $(".select_style").length;
        if (count_selects >=5 ) {
            alert(count_selects + "is >=5");
        }
        else {
            alert(count_selects + "is <5");
        }
        e.preventDefault();
    });

My JsFiddle is

JSFiddle Link

Answer 1

How about something like this?

$(function() {

    $("#submit-selection").click(function(e) {

        var selects = $(".select_style");

        var option_occurrences = {0:0, 1:0, 2:0, 3:0, 4:0, 5:0};

        for (var i = 0; i < selects.length; i ++) {
            option_occurrences[selects[i].value] ++;
        }

        var ok = true;

        for (var i = 1; i <= Math.min(5, selects.length); i ++) {
            if (option_occurrences[i] != 1) {
                ok = false;
                break;
            }
        }

        alert(ok ? "OK!" : "not OK...");

        e.preventDefault();
    });

});

Online Demo

Answer 2

If I understood what you want, this should work:

function validate(){
    passed = true;
    if ($('select').length > 6) {
        for (var i = 0; i <= 5; i++) {
            if (i > 0) {
                if ($('select option:selected[value=' + i + ']').length != 1) {
                    passed = false;
                }
            } else {
                if ($('select option:selected[value=' + i + ']').length != 2) {
                    passed = false;
                }
            }
        }
        if (passed) {
            alert('passed');
        } else {
            alert('not passed');
        }
    } else {
        for (var i = 0; i < $('select').length; i++) {

            if ($('select option:selected[value=' + i + ']').length != 1) {
                passed = false;
            }

        }
        if (passed) {
            alert('passed');
        } else {
            alert('not passed');
        }
    }
}

demo .

Answer 3

Try something like this. I hope it will solve your problems... :)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#submit-selection").click(function(e){
        var count_selects = $(".select_style").length;
        var select = $('#form1').find('select');
        var track = [];
        var limit = 0;
        if (count_selects >=5 ) {
            $.each(select, function(i, v) {
                var val = $(this).val();
                if(val != '0')
                    track.push(val);
            });
            limit = count_selects - 1;
        }
        else {
            $.each(select, function(i, v) {
                var val = $(this).val();
                if(val != '0')
                    track.push(val);
            });
            limit = count_selects + 1;
        }
        if(checkArray(track , limit) == 1){
            //alert('here');
            e.preventDefault();
        }
    });
});
function checkArray(track, limit){
    var flag = 0;
    for(var i = 1; i < limit; i++)
    {
        if($.inArray(i.toString(), track) == -1){
            alert('Can\'t submit');
            flag = 1;
            break;
        }
    }
    return flag;
}
</script>