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

Question

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

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

// 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; 
     } 

Answer 1

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

Кроме того, вы возвращаете ложь перед добавлением класса выделения. Вероятно, вы захотите отслеживать, являются ли какие-либо исключения недопустимыми, и верните 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; 
}