Переопределение формы отправки на основе подсчета элементов с помощью jquery.each

Question

Я, наверное, все делаю неправильно, но вот что я пытаюсь сделать:

У меня есть форма, которая содержит приблизительно 50 полей выбора, которые генерируются динамически на основе некоторой информации базы данных. У меня нет контроля над идентификаторами текстовых полей, но я могу добавить класс для каждого из них. Перед отправкой формы пользователю необходимо выбрать хотя бы один элемент из поля выбора, но не более четырех.

Я немного сонный и в целом незнаком с jQuery, но я пытаюсь переопределить $ ("form"). Submit, и вот что я делаю. Любые советы или предложения с благодарностью.

$("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

Сколько фактических входов с классом sportsCoachedValidation есть на странице?

Если есть только одна, ваша внутренняя часть, в которой вы подсчитываете счет sportsSelected, не будет работать должным образом ... В любом случае, сейчас внутренняя часть будет смотреть только на самый первый выбранный параметр в поле самый первый , независимо от того, сколько других вариантов есть на странице. Рассмотрим что-то вроде этого:

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

Я немного изменил внешнюю часть, вернув вам набор всех выбранных параметров по всей форме. Внутренняя часть теперь использует this для ссылки на текущий выбранный параметр, который проходит через jquery «каждый». Ваша версия приводит к тому, что повторно выбирает для некоторых новых критериев, не используя то, что вы пытаетесь просмотреть.

Удачи!

Answer 2

Хорошо, вот еще один способ, возможно, еще больше упростить это?

$("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;
    }
});

Просто мысль, которая возникла после моего последнего поста. Может потребоваться доработка. Надеюсь, это не полный провал и возможно для того, что вы пытаетесь сделать. Удачи!

Answer 3

Кажется, в основном хорошо. Вы можете заменить всю первую часть в $('.sportsCoachedValidation').each(function() { ... на

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