Выделите пустое поле выбора после предупреждения

0

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

Проведя поиск SO, я нашел примеры кода проверки, которые будут предупреждать пользователя, когда поле select возвращает пустой value-

// alert if a select box selection is not made
    var selectEls = document.querySelectorAll('select'),
        numSelects = selectEls.length;

    for(var x=0;x<numSelects;x++) {
        if (selectEls[x].value === '') {
            alert('One or more required fields does not have a choice selected... please check your form');
            return false;
            $(this).addClass("highlight");

        }

В конце я попытался добавить условие после отклонения предупреждения, так что окно выбора оскорбителя будет выделено добавлением класса "highlight", но это ничего не делает. Мой.highlight css - {border: 1px red solid;}

Любая помощь здесь?

ОБНОВЛЕНО С ОТВЕТОМ - Спасибо @Adam Rackis

Этот код работает отлично. Я добавил строку для удаления добавленного класса.highlight для выбора, который не вызвал ошибку после исправления

// alert if a select box selection is not made
    var selectEls = document.querySelectorAll('select'),
    numSelects = selectEls.length;
    $('select').removeClass("highlight");//added this to clear formatting when fixed after alert
    var anyInvalid = false;
    for(var x=0;x<numSelects;x++) {
        if (selectEls[x].value === '') {
            $(selectEls[x]).addClass("highlight");
            anyInvalid = true;
        }}
        if (anyInvalid) {
            alert('One or more required fields does not have a choice selected... please check your form');
            return false;
        }
  • 0
    Вы возвращаетесь до addClass. Место return false; после $(this).addClass("highlight"); и кстати, что this значит здесь?
Теги:
validation
forms
alert

1 ответ

1
Лучший ответ

Вы были близки. В вашем цикле this не относится к каждому выбранному, который вы проверяете.

Кроме того, вы возвращаете false до добавления выделенного класса. Вероятно, вы захотите отслеживать, являются ли какие-либо исключения недопустимыми, и верните false в самом конце после того, как вы закончите проверку.

Наконец, подумайте о том, чтобы перевести свое предупреждение на самое нижнее, поэтому ваш пользователь не увидит несколько предупреждений.

var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
    if (selectEls[x].value === '') {
        $(selectEls[x]).addClass("highlight");
        anyInvalid = true;
    }
}
if (anyInvalid) {
    alert('One or more required fields does not have a choice selected... please check your form');
    return false;
}

Кроме того, поскольку вы уже используете jQuery, почему бы не воспользоваться преимуществами его функций немного больше:

$('select').each(function(i, sel){
    if (sel.value === '') {
        $(el).addClass("highlight");
        anyInvalid = true;
    }
});
if (anyInvalid) {
    alert('One or more required fields does not have a choice selected... please check your form');
    return false;
}
Поделиться
  • 0
    Спасибо, я думаю, что это почти работает для меня: я использовал верхнее предложение, но я думаю, что отсутствует пропущенное закрывающее '}' для выражения 'for'. Я добавил это в конец кода. Кроме того, я получаю выделенное окно выбора, но без предупреждения сначала? Есть идеи почему?
  • 0
    @ user1837608 - все верно - предупреждение должно показываться последним. Сначала следует выделить ВСЕ плохие выборки, а затем показать одно предупреждение. Прежде чем вы просто выделили первый неудачный выбор, а затем вернулись. Я бы порекомендовал вам сделать все проверки, прежде чем сбои, чтобы ваш пользователь мог видеть все ошибки заранее.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню