Найти пустые поля выбора

Question

Я пытаюсь использовать jQuery для поиска пустых полей формы на странице.

Для ввода текстовых полей я могу использовать

input[value='']

Для полей textarea я могу использовать

textarea:empty

Что такое селектор для поиска полей выбора, у которых выбранная опция имеет пустое значение?

Несмотря на то, что jQuery позволяет получить выбранное значение опции с помощью .val(), следующее не работает как селектор.

select[value='']

Answer 1

Общий селектор, вероятно, не лучшая вещь для использования. Я бы выделил все элементы формы и перебрал их, чтобы найти первый элемент без значения

$(":input").each(function () {
  if (!this.value) {
    this.focus()
    return false
  }
})

. Возможно, вам понадобится добавить флажки или переключатели, если они есть в вашей форме.

Answer 2

Вы можете выбрать все поля выбора, у которых выбранная опция имеет пустое значение:

$('select option:selected[value=""]')

И вы также можете проверить, имеет ли выбранная опция пустое значение:

$('select option:selected').val() === ""

Демонстрация:

$(function() {
    console.log('The option with text "' + $('select option[value=""]').text() + '" has no value.');
    
    $('select').change(function() {
        if ($('select option:selected').val() === "") { // or $(this).val() === ""
            console.log('This option has no value.');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
    <option value="value1">Option 1</option>
    <option value="value2">Option 2</option>
    <option value="value3">Option 3</option>
    <option value="">Option 4</option>
</select>

Редактировать:

Пример фокуса:

$(function() {
    $('.check').each(function() {
        if (!$(this).val()) {
            $(this).focus();
            return false;
        }
    });
});

.check {
    display: block;
    margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <input type="text" class="check" value="John Doe">
    
    <select class="check">
        <option value="value1">Opiton 1</option>
        <option value="value2">Opiton 2</option>
        <option value="value3">Opiton 3</option>
        <option value="" selected>Opiton 4</option>
    </select>
    
    <textarea class="check" rows="4">The cat was playing in the garden</textarea>
</form>