CODEWITHSUNDEEP
javascriptjqueryvalidationinput
Wesleyvans
Wesleyvans

Reputation: 67

Check to make sure all fields are filled Jquery

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

Upvotes: 3

Views: 10776

Answers (5)

Kaushik solanki
Kaushik solanki

Reputation: 438

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

Upvotes: 0

Carsten Løvbo Andersen
Carsten Løvbo Andersen

Reputation: 27051

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input required>
  <input required>
  <input required>
  <button id="confirm">check</button>
</form>

Upvotes: 8

charlietfl
charlietfl

Reputation: 171698

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

Upvotes: 0

Dilip Suthar
Dilip Suthar

Reputation: 65

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());
  });

Upvotes: 0

Manuel Cheța
Manuel Cheța

Reputation: 500

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

This should do the trick.

Upvotes: 0

Related Questions