Проверьте необходимые входные данные с помощью JavaScript

Question

У меня есть 4 входа на моей странице, и на кнопке onClick я хочу убедиться, что все входы заполнены текстом.

<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="text" value="" id="input3">
<input type="text" value="" id="input4">

Что я хочу: сохранить все требуемые идентификаторы входовв массиве и по щелчку, проверьте, есть ли какие-либо входные данные, которые являются пустыми.

Как я могу сделать это самым простым способом?

Answer 1

<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="text" value="" id="input3">
<input type="text" value="" id="input4">






jQuery(function($){

                var arr = [];
                // number of input elements
                var count = $("input").length;
                // store list of input ids
                $("buttonName").on('click', function(event) {
                     $("input").each(function(i){
                        var currId = $(this).attr('id');
                        arr.push(currId);
                        if ($(this).val()=="") {
                            alert(currId+": has no input");
                        }
                    });
                });
            });

Answer 2

Вы также можете попробовать добавить REGEX для более строгой проверки

 // using Plain JavaScript

  var input1= document.getElementById('input1').value;
  if(input1 == "" ){
      alert("Input 1 is Empty");
        return false;
  }

  var input2 = document.getElementById('input2').value;
  if(input12 == "" ){
      alert("Input 2 is Empty");
        return false;
  }

  var input3 = document.getElementById('input3').value;
  if(input3 == "" ){
      alert("Input 3 is Empty");
        return false;
  }


  var input4 = document.getElementById('input4').value;
  if(input4 == "" ){
      alert("Input 4 is Empty");
        return false;
  }

Answer 3

просто вставить обязательный атрибут не удается .. вы можете сделать это .. добавить функцию проверки к событию размытия, то есть когда пользователь покидает поле ..

<input type="text" onblur="validate(this)" value="" id="input1">
<input type="text" onblur="validate(this)" value="" id="input2">
<input type="text" onblur="validate(this)" value="" id="input3">
<input type="text" onblur="validate(this)" value="" id="input4">

<button> ... </button>

и с помощью jquery вы можетесделай это ..

 function validate(obj){
    if($(obj).val() == ''){
       alert('this Field cannot be empty');
       $(obj).focus();  //send focus back to the object...
    }
 }

Answer 4

Используйте вместо этого обязательный тег, как указано ниже

<input type="text" value="" id="input1" required>