I'm trying to make an easy validator in jquery for my input fields. Currently i got the following:

function checkInputs(){
var isValid = true;
$('.input-required').each(function() {
     if($(this).val() === ''){
        isValid = false;
         return false;
     }        
 });
return isValid;
}

And then i got a button right that is this:

$('#confirm').click(function () { 
    alert(checkInputs());
});

But this always returns true even if the input is empty. Also after this works am going to make to where if all inputs are filled in, a button will be enabled to click on.

edited it so it has a selector now, still getting always true.

Thanks in advance

I'm trying to make an easy validator in jquery for my input fields. Currently i got the following:

function checkInputs(){
var isValid = true;
$('.input-required').each(function() {
     if($(this).val() === ''){
        isValid = false;
         return false;
     }        
 });
return isValid;
}

And then i got a button right that is this:

$('#confirm').click(function () { 
    alert(checkInputs());
});

But this always returns true even if the input is empty. Also after this works am going to make to where if all inputs are filled in, a button will be enabled to click on.

edited it so it has a selector now, still getting always true.

Thanks in advance

• javascript
• jquery
• validation
• input

• you have a typo is your code, maybe you mean $('.input-required'). – Pooya Mobasher Behrooz Commented Feb 20, 2017 at 14:43
• Oh damn you are right, added it ! but still always returns true – Wesleyvans Commented Feb 20, 2017 at 14:47

5 Answers 5

Try use the filter attribute to get the inputs that has a required attribute.

$('input').filter('[required]')

Added code to check if inputs are filled and enable or disable button. Note if we use this, there aint much point of the $('#confirm').click(function()); function since this button will only be enabled when the inputs are filled.

function checkInputs() {
  var isValid = true;
  $('input').filter('[required]').each(function() {
    if ($(this).val() === '') {
      $('#confirm').prop('disabled', true)
      isValid = false;
      return false;
    }
  });
  if(isValid) {$('#confirm').prop('disabled', false)}
  return isValid;
}

$('#confirm').click(function() {
  alert(checkInputs());
});

//Enable or disable button based on if inputs are filled or not
$('input').filter('[required]').on('keyup',function() {
checkInputs()
})

checkInputs()

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input required>
  <input required>
  <input required>
  <button id="confirm">check</button>
</form>

Try to target the element in this way: $('input[required]')

This should do the trick.

if it is 0 then all input filled otherwise it will return 0 mean any one or more are empty input.

 function checkInputs(){
  var flag = 0;
  $('input').each(function() {
       if($(this).val() == ''){
         return flag = 1;
       }
   });
  return flag;
  }
  $('#confirm').click(function () {
      alert(checkInputs());
  });

Your selector is looking for a tagName <input-required></input-required> that obviously doesn't exist.

Add a dot prefix for class

Can also use filter() to simplify

function checkInputs(){
    return !$('.input-required').filter(function() {
         return !this.value;   
     }).length;
}

NOTE: Will not work on radios or checkbox if those are part of the collection of elements with that class and you would need to add conditional for type if that is the case

You forgot to put class symbol in jQuery:

function checkInputs() {
    var isValid = true;
    $('.input-required').each(function() {
     if($(this).val() === ''){
        isValid = false;
         return false;
     }        
  });

  return isValid;
}

Try this..