проверьте, все ли входные теги имеют значение

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я хочу выполнить какое-то действие, если все поля ввода имеют какое-то значение. Итак, я проверяю, имеет ли поле ввода значение, используя условие длины, но оно работает некорректно

 if($(".form-control:empty").length == 0){
            console.log('All are filled')
          
        }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="instance-dir"  placeholder="Instance Directory"  class="form-control"/>
<input type="text" id="Wroking-dir"  placeholder="Working directory"  class="form-control"/>

Ответ №1:

:empty Псевдоселектор jQuery проверяет наличие дочерних узлов, он не проверяет наличие значений. input элементы никогда не имеют дочерних узлов (они являются элементами void).

В CSS нет селектора « input без значения», и, просматривая список jQuery, я не вижу ни одного, который он добавляет. Поэтому вам придется просмотреть элементы, например:

 if ($(".form-control").get().every(e => e.value))) {
    // Every `.form-control` has a non-blank value
}

1. некоторые входные данные будут иметь значение как неопределенное, этот случай будет обработан правильно? Как я могу проверить, не является ли значение пустым и неопределенным

2. входное значение не должно быть пустым и не должно иметь неопределенного значения

3. @shee8 — По определению, input value свойство элемента никогда undefined не является . Это всегда строка. Но если бы это было возможно undefined , приведенная выше проверка также проверила бы их, потому что оба "" и undefined являются ложными значениями, и приведенные выше проверки показывают, что у каждого input есть истинное значение.

4. @shee8 — Нет, это не так: jsfiddle.net/tjcrowder/fr1qucns В вашем тесте должна быть ошибка. (И снова: value input элемента никогда undefined нет. У вас есть input select элементы, отличные от / .form-control ?)

5. Если у меня есть значок папки в теге ввода, и если я просматриваю свой локальный компьютер, чтобы выбрать папку, и если я не выбираю ее и нажимаю «Отмена» вместо «ок», значение поля ввода не определено

Ответ №2:

Если у ваших входных данных есть required тег, вы можете использовать input:valid его, чтобы проверить, был ли он заполнен.

 $('#check').on('click', function() {
  if (!$('input[type="text"]:not(:valid)').length) console.log('All are filled');
  else console.log('Some are missing');
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="instance-dir" placeholder="Instance Directory" class="form-control" required />
<input type="text" id="Wroking-dir" placeholder="Working directory" class="form-control" required/>

<button id="check">Check</button>