Возникают проблемы с отображением значения массива в событии console.log с использованием функции .push в Jquery

Question

Проблема здесь в том, что я разработал базовый веб-сайт, который принимает данные, вводимые пользователями в форму, и затем я собираюсь распечатать это значение в console.log. однако, когда я проверяю консоль под инструментами разработчика в Google Chrome, все, что я получаю, это [] length: 0__proto__: Array (0) а не значение, введенное пользователем.

<input type="text" name="username" value="testuser">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
 function error() {
  	 
  	 var error1 = [];
  	 var list_of_values = [];

  	 username_error = $('input[name="username"]').val();
  	 if (!username_error){
  	     error1.push('Fill in the username field.');
      } 
 
    console.log(error1);
 
     if (error1.length > 0){
     	for(let username_error of error1){ 
     	 alert(username_error);
     return false;
     }
  
    }
  
     string = $('input[name="username"]').val('');
     if(string.length <= 1){
 	 for (let list_of_values of string){
 		string.push();
 		
 	}
        console.log(string);

        return true;
    }

    }
error();
</script>
    

Answer 1

Зарегистрируйте <input> для события input.Когда пользователь вводит что-либо в <input>, событие input может вызвать обработчик события (функция, в демонстрации это log()).

Демо

Подробностипрокомментировал в демке

// Reference the input
var text = document.querySelector('[name=username]');

// Register the input to the input event
text.oninput = log;

/*
Whenever a user types into the input...
Reference the input as the element being typed into
if the typed element is an input...
log its value in the console.
*/
function log(event) {
  var typed = event.target;

  if (typed.tagName === 'INPUT') {
    console.log(typed.value);
  }
}

<input type="text" name="username" value="testuser">

Answer 2

Предложение, вы можете сделать это проще с помощью следующего кода. функция ниже сканирует все поля ввода под элементом fieldset $ ("fieldset * [name]"). each ....

проблема выше - многократное оповещение, что если у вас много входов, оно будет оповещать каждый вход, что не будет хорошо для пользователей :) вместо этого вы можете сделать это

alert(error1.toString().replace(/,/g, "\n")); 

для одновременного оповещения о списках ошибок.

string = $ ('input [name = "username"]'). Val (''); это на самом деле очищает ваше значение ... так что ничего не даст вам в console.log ().

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

<fieldset>
  <input type="text" name="name" value="" placeholder="name"/><br/><br/>
  <input type="text" name="username" value="" placeholder="username"/><br/><br/>
  <button onclick="error()">check</button>
</fieldset>

<script>


function error() {
    
     var error1 = [];
     var list_of_values = [];
     

 	 $("fieldset *[name]").each(function(){
       var inputItem = $(this);
       if(inputItem.val()) {
          return list_of_values.push(inputItem.val());
       }
       
       error1.push('Fill in the '+inputItem.attr('name')+' field!')
       
   });
 
  if(error1.length > 0) {
     console.log(error1);
     alert(error1.toString().replace(/,/g, "\n"));
  }
  if(list_of_values.length > 0) {
     console.log(list_of_values);
  }
}
</script>