What I'm trying to do is check if any of the inputs that have the required property are empty. If they do then alert "empty" but it only detects the first input. Any ideas, help?

$(document).ready(function(){
    $("button").click(function(){
        if(!$("form input[required]").val()){
            alert("empty");
        }
    });
});

<script src=".1.1/jquery.min.js"></script>
<form action="" method="">
    <div>
        <input type="text" required/>
    </div>
    <div>
        <input type="text" required/>
    </div>
    <div>
        <input type="text" required/>
    </div>
</form>
<button>test</button>

What I'm trying to do is check if any of the inputs that have the required property are empty. If they do then alert "empty" but it only detects the first input. Any ideas, help?

$(document).ready(function(){
    $("button").click(function(){
        if(!$("form input[required]").val()){
            alert("empty");
        }
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
    <div>
        <input type="text" required/>
    </div>
    <div>
        <input type="text" required/>
    </div>
    <div>
        <input type="text" required/>
    </div>
</form>
<button>test</button>

• javascript
• jquery

Share Improve this question Follow edited Sep 8, 2015 at 6:37 Alexis Tyler 96866 gold badges3232 silver badges5151 bronze badges asked Sep 8, 2015 at 6:01 Juliver GalletoJuliver Galleto 9,0572727 gold badges9292 silver badges169169 bronze badges 1

• check my answer it will get placeholder text. :) – Manoj Dhiman Commented Sep 8, 2015 at 6:18

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

$("form input[required]").val() will return only the value of first input with required attribute.

You need to iterate over each of the required input element and check whether it has a value - probably by trimming(as done below) to exclude blank values.

$(document).ready(function() {
  $("button").click(function() {
    var $empty = $("form input[required]").filter(function() {
        return !this.value.trim();
      }),
      valid = $empty.length == 0,
      items = $empty.map(function() {
        return this.placeholder
      }).get();

    if (!valid) {
      alert("below itema are empty: \n" + items.join('\n'));
    }

  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
  <div>
    <input type="text" placeholder="Item A" required/>
  </div>
  <div>
    <input type="text" placeholder="Item B" required/>
  </div>
  <div>
    <input type="text" placeholder="Item C" required/>
  </div>
</form>
<button>test</button>

You will have to loop through all the elements in this case.

$(document).ready(function(){
  $("button").click(function(){
     var isEmpty = false;
     $("form input[required]").each(function(){
        if(!$(this).val()){
           isEmpty = true;
        }
     });
     if(isEmpty) alert('Empty');
  });
});

You will need to loop over all found element to check if at least one of them is not filled in. It's convenient to use Array.prototype.some method here:

$(document).ready(function(){
  $("button").click(function(){
    
    var hasEmpty = $("form input[required]").toArray().some(function(el) {
      return !el.value.trim();
    });
    
    if (hasEmpty) {
      alert("empty");
    }
    
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
  <div>
    <input type="text" required/>
  </div>
  <div>
    <input type="text" required/>
  </div>
  <div>
    <input type="text" required/>
  </div>
</form>
<button>test</button>

Use like this:

if($("form input[required]")).filter(function(){
   return $(this).val().length === 0;
  }).each(function(){
      alert("empty");
  });

You just need to use this in .each method so that you can select every required element . Just like this Jsfiddle

$(document).ready(function(){
  $("button").click(function(){
	$("form input[required]").each(function(){
        if(!$(this).val()){
           alert($(this).attr('name')+" is empty");
        }
     });
  });
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="">
  <div>
    <input name="input1" type="text" required/>
  </div>
  <div>
    <input name="input2" type="text" required/>
  </div>
  <div>
    <input name="input3" type="text" required/>
  </div>
</form>
<button>test</button>

Update

after reading ment if you want to get placeholder text Check this . You can use $(this).attr('placeholder')

please try this for form submit.

 $("form").submit(function(){

  $("form input[required]").each(function(){
    if(!$(this).val()){
       alert($(this).attr('name')+" is empty")

 }); 

your html look like this.

<form action="" method="">
 <div>
 <input type="text" required/>
 </div>
  <div>
  <input type="text" required/>
  </div>
  <div>
  <input type="text" required/>
  <input type="submit" value="test"/>
  </div>
  </form>

You need tou use each function to get value of 'input required'

$(document).ready(function(){
    $("button").click(function(){

        $("form input[required]").each(function(e,ui){
            if(!$(ui).val()){
               alert(e,' - empty');
            }
        });

    });
});