0

I have 4 inputs on my page, and on a button onClick, i want to check, that all the inputs are filled with text.

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

What i want : Store all the required inputs ID in an array, and on click, check, that is there any input, that is empty.

How can i do this at the simplest way?

4

4 Answers 4

4

Use required tag instead as given below

<input type="text" value="" id="input1" required>
Sign up to request clarification or add additional context in comments.

Comments

0

you can also try adding REGEX for more strict checking

 // 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;
  }

2 Comments

But how can i do this with multiple inputs?
same code chunk for each of the input, let me update code for you.
0

just incase the required attribute fails.. you can do this.. add a validate function to the blur event, that is when the user leaves the field..

<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>

and using jquery you can do this..

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

Comments

0
<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");
                        }
                    });
                });
            });

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.