Как проверить, имеют ли значение все элементы массива, которые являются идентификаторами элементов HTML

Question

Я получаю id s требуемого html input s в массиве через ajax. Вот мой HTML:

<form>
  <input type="text" id="firstName" placeholder="First Name">
  <input type="text" id="lastName" placeholder="Last Name">
  <input type="email" id="email" placeholder="Email">
</form>

Вот обязательные идентификаторы:

var arr = ['firstName', 'email'];

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

var areSomeFieldsEmpty = false;

function checkForm() {
  $.each(arr, function(index, value){
    if($('#' + value).val().length <= 0) {
      areSomeFieldsEmpty = true;
    } else {
      areSomeFieldsEmpty = false;
    }
  });

Но, оставив пустой вход firstName, если я положу значение на вход email, я получу false как значение areSomeFieldsEmpty. Но это должно быть true.

Как это исправить?

var arr = ['firstName', 'email'];

$('form').on('keyup blur change', 'input', function() {
	checkForm();
});
var areSomeFieldsEmpty = false;

function checkForm() {
  $.each(arr, function(index, value){
    if($('#' + value).val().length  <= 0) {
      areSomeFieldsEmpty = true;
    } else {
      areSomeFieldsEmpty = false;
    }
  });

  console.log(areSomeFieldsEmpty);
}

<form>
  <input type="text" id="firstName" placeholder="First Name">
  <input type="text" id="lastName" placeholder="Last Name">
  <input type="email" id="email" placeholder="Email">
</form>

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

Answer 1

Ваша функция each повторяет процесс для каждого поля и возвращает окончательный результат.

Таким образом, в фоновом режиме процесс выглядит примерно так:

areSomeFieldsEmpty = true, // по имени

areSomeFieldsEmpty = true, // по фамилии

areSomeFieldsEmpty = false, // по электронной почте

и последний результат - это то, что вы видите areSomeFieldsRequired = false или viseversa . в зависимости от того, как ваше приложение проходит через каждый цикл. Обычно это сверху вниз.

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

И вы можете установить areSomeFieldsRequired = true или false один раз

function checkForm() {
var counter = 0; 
  $.each(arr, function(index, value){
    if($('#' + value).val().length  <= 0) {
      counter++;
    }
  });

  console.log(counter);
 if (counter > 0){
  areSomeFieldsEmpty = true
 }
 else {
  areSomeFieldsEmpty = false
 }
}

Answer 2

   var arr = ['firstName', 'email'];
$(function(){
$('form').on('keyup blur change', 'input', function() {
    checkForm();
});
})


function checkForm() {
    var areSomeFieldsEmpty = false;
    $.each(arr, function(index, val) {
          if($('#'+val).val() == ""){
             areSomeFieldsEmpty = true;
           }
           else{
            areSomeFieldsEmpty = false;
           }
      });  
  console.log(areSomeFieldsEmpty);
}

Answer 3

Просто разорвать цикл, вернуть false;разорвет цикл, поэтому, когда вы получите любое проверенное значение, вы просто разорвете цикл, поэтому после areSomeFieldsEmpty = false вам больше не понадобится цикл.

var areSomeFieldsEmpty = false;

function checkForm() {
  $.each(arr, function(index, value){
   if($('#' + value).val().length <= 0) {
   areSomeFieldsEmpty = true;

  } else {
   areSomeFieldsEmpty = false;
   return false;
 }
});