Как получить входное значение для проверки

Question

У меня есть форма

<div class = "required">
 <div class = 'myclass'>
  <input type="text" name="login" id="login" value="" class="anotherclass">
 </div>
</div>
<div class = "required">
 <div class = 'myclass'>
  <input type="text" name="pass" id="pass" value="" class="anotherclass">
 </div>
</div>
<div class>
 <div class = 'myclass'>
  <input type="text" name="comment" id="comment" value="" class="anotherclass">
 </div>
</div>

Я хочу получить все элементы с классом «required» и получить входное значение внутри этого div, а затем проверить значение. Я могу получить значение одного элемента по идентификатору, но я хочу попытаться получить значения детей, выбранных классом родителей. Я получаю массив по

 var form = $('.required :input')

, но не могу получить входное значение. Используйте индекс массива или каждую ошибку возврата.

 form[0].val();

Uncaught TypeError: form[0].val is not a function

Пожалуйста, помогите мне, где я ошибаюсь?

Answer 1

с использованием скобок вроде [0] преобразует объект jquery в DOMElement. Итак, вам нужен один из этих синтаксисов:

Javascript:

 form[0].value

или оставайтесь на Jquery:

 form.eq(0).val()

Answer 2

Вам необходимо использовать al oop, чтобы получить значение каждого ввода отдельно из коллекции в объекте jQuery. Для этого вы можете использовать each() и val():

$('.required :input').each(function() {
  let val = $(this).val();
  console.log(val);
  
  // validate here...
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="required">
  <div class="myclass">
    <input type="text" name="login" id="login" value="lorem" class="anotherclass">
  </div>
</div>
<div class="required">
  <div class="myclass">
    <input type="text" name="pass" id="pass" value="ipsum" class="anotherclass">
  </div>
</div>
<div class>
  <div class="myclass">
    <input type="text" name="comment" id="commnt" value="dolor" class="anotherclass">
  </div>
</div>

Что касается ошибки, которую вы видите, это потому, что доступ к объекту jQuery по индексу, т.е. $('.foo')[0] возвращает объект Element, а не объект jQuery, и у них нет метода val().