Overriding form submit based on counting elements with jquery.each

Question

I am probably going about this all wrong, but here's what I'm trying to do:

I have a form that has approximately 50 select boxes that are generated dynamically based on some database info. I do not have control over the IDs of the text boxes, but I can add a class to each of them. Before the form is submitted, the user needs to select at least one item from the select box, but no more than four.

I'm a little bit sleepy, and I'm unfamiliar with jQuery overall, but I'm trying to override $("form").submit, and here's what I'm doing. Any advice or suggestions are greatly appreciated.

$("form").submit(function() {

    $('.sportsCoachedValidation').each(function() {
        if ($('.sportsCoachedValidation :selected').text() != 'N/A') {
            sportsSelected++
        }                    
    });

    if (sportsSelected >= 1 && sportsSelected <= 4) {
        return true;
    }
    else if (sportsSelected > 4) {
        alert('You can only coach up to four sports.');
        sportsSelected = 0;
        return false;
    }
    else {
        alert('Please select at least one coached sport.');
        sportsSelected = 0;
        return false;
    }
});

Answer 1

Seems mostly alright. You can replace the whole first part under $('.sportsCoachedValidation').each(function() {... with

var sportsSelected = $('.sportsCoachedValidation :selected').length;

Answer 2

How many actual inputs with the class sportsCoachedValidation are there on the page?

If there is only one, your inner part of where you tally up the sportsSelected count isn't going to work as expected... Either way, right now the inner part is only going to look at the very first selected option in the very first select box, no matter how many other selections there are on the page. Consider something like this:

$('.sportsCoachedValidation :selected').each(function() {
    if ($(this).text() != 'N/A') {
        sportsSelected++;
    }                    
});

What I've done is slightly changed the outer part return you a set of all selected options across the entire form. The inner part now uses this to refer to the currently selected option that is being looped through via the jquery "each". Your version is having the effect of re-selecting on some new criteria, not making use of what you're trying to loop through.

Best of luck!

Answer 3

OK, here is one other way of perhaps simplifying this further?

$("form").submit(function() {

    // How about avoiding the "each" loop, and just let jQuery count 'em up? (Not actually tested!)
    var sportsSelected = $('.sportsCoachedValidation :selected[value!="N/A"]').length;

    if (sportsSelected >= 1 && sportsSelected <= 4) {
        return true;
    }
    else if (sportsSelected > 4) {
        alert('You can only coach up to four sports.');
        return false;
    }
    else {
        alert('Please select at least one coached sport.');
        return false;
    }
});

Just a thought I had after my last post. It may need some refinement. Hopefully it isn't a complete failure and is possible for what you're trying to do. Good luck!