CODEWITHSUNDEEP
jquery
user1896653
user1896653

Reputation: 3327

How to check if all array elements which are ids of html elements has value

I am receiving ids of required html inputs in an array through ajax. Here is my HTML:

<form>
  <input type="text" id="firstName" placeholder="First Name">
  <input type="text" id="lastName" placeholder="Last Name">
  <input type="email" id="email" placeholder="Email">
</form>

Here is the required ids:

var arr = ['firstName', 'email'];

My goal is to check if all required input has value or not. So, I have written:

var areSomeFieldsEmpty = false;

function checkForm() {
  $.each(arr, function(index, value){
    if($('#' + value).val().length <= 0) {
      areSomeFieldsEmpty = true;
    } else {
      areSomeFieldsEmpty = false;
    }
  });

But, by keeping firstName input empty, if I put value on email input, I got false as a value of areSomeFieldsEmpty. But, it should be true.

enter image description here

How to fix this?

var arr = ['firstName', 'email'];

$('form').on('keyup blur change', 'input', function() {
	checkForm();
});
var areSomeFieldsEmpty = false;

function checkForm() {
  $.each(arr, function(index, value){
    if($('#' + value).val().length  <= 0) {
      areSomeFieldsEmpty = true;
    } else {
      areSomeFieldsEmpty = false;
    }
  });

  console.log(areSomeFieldsEmpty);
}
<form>
  <input type="text" id="firstName" placeholder="First Name">
  <input type="text" id="lastName" placeholder="Last Name">
  <input type="email" id="email" placeholder="Email">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Views: 77

Answers (2)

Evik Ghazarian
Evik Ghazarian

Reputation: 1791

Your each function repeats the process for each field and return the final result.

So in the background the process is something like

areSomeFieldsEmpty = true , // on firstname

areSomeFieldsEmpty = true , // on last name

areSomeFieldsEmpty = false , // on email

and the last result is what you see areSomeFieldsRequired = false or viseversa. depending on how your application runs through the each loop. Which is usually top to bottom.

SO I suggest having a counter check the true or false and increment if true then if the counter is greater than 0 it means there was some fields empty.

And you can set the areSomeFieldsRequired = true or false once

function checkForm() {
var counter = 0; 
  $.each(arr, function(index, value){
    if($('#' + value).val().length  <= 0) {
      counter++;
    }
  });

  console.log(counter);
 if (counter > 0){
  areSomeFieldsEmpty = true
 }
 else {
  areSomeFieldsEmpty = false
 }
}

Upvotes: 1

dilli.shrestha
dilli.shrestha

Reputation: 173

Simply break the loop , return false; will break the loop, so when you get any value validated, you simple break the loop, so after areSomeFieldsEmpty = false, you will no further need the loop.

var areSomeFieldsEmpty = false;

function checkForm() {
  $.each(arr, function(index, value){
   if($('#' + value).val().length <= 0) {
   areSomeFieldsEmpty = true;

  } else {
   areSomeFieldsEmpty = false;
   return false;
 }
});

Upvotes: 0

Related Questions