How i can do that if inputs are empty nothing will happen

Question

How can i do that if two inputs are empty nothing will happen now it work just when one of them are empty.

let inputs = document.querySelectorAll('.input');
let btn = document.querySelector('.btn');

btn.onclick = function() {
  for (i = 0; i < inputs.length; i++) {
    if (inputs[i].value == "") {
      inputs[i].classList.add("error__border");
    } else {
      console.log('it is working');
    }
  }
}

.error__border {
  border: 1px solid red !important;
}

<input type="text" class="input"><br><br>
<input type="text" class="input"><br><br>
<button class="btn">Add</button>

Thank tou very much!

**Aside note:** Embrace the `addEventListener` function `(:` — Ele, Jan 23 '20 at 16:44
`nothing will happen`? You mean the class `error__border` should not be added? — random, Jan 23 '20 at 16:46
if two inputs are not empty then do something but if at least one is emty then it must be red — Volodumr, Jan 23 '20 at 16:51

score 2 · Answer 1 · answered Jan 23 '20 at 16:56

You can use the following approach for getting the inputs with empty values in order to mark them.

And finally, checking the filtered array's length to validate if the inputs have their values.

let inputs = document.querySelectorAll('.input');
let btn = document.querySelector('.btn');

btn.addEventListener("click", function() {
  let empty = Array.from(inputs).filter(({value}) => value.trim() === "");
  if (empty.length) {
    empty.forEach(i => i.classList.add("error__border"));
  } else console.log('it is working');
});

.error__border {
  border: 1px solid red !important;
}

<input type="text" class="input"><br><br>
<input type="text" class="input"><br><br>
<button class="btn">Add</button>

@prasanth because I don't want to do the whole work for the OP. `(:` — Ele, Jan 23 '20 at 17:16

prasanth · Accepted Answer · 2020-01-23T17:03:31.337

You could with Array#every

Array#from convert nodelist to Array.
Then use Array#every to check all the value are not empty
Then you can add the class on else statement
Use addEventListener instead of onclick for better approach

let inputs = document.querySelectorAll('.input');
let btn = document.querySelector('.btn');

btn.addEventListener('click', function() {
  let res = Array.from(inputs).every(a => a.value.trim());
  
  inputs.forEach(a => {   //for all time of click check color code with respect to inout
    a.classList.remove('error__border')
    if (!a.value.trim()) {
      a.classList.add('error__border')
    }
  })

  if (res) {
    console.log('Success')
  }

}, false);

.error__border {
  border: 1px solid red !important;
}

<input type="text" class="input"><br><br>
<input type="text" class="input"><br><br>
<button class="btn">Add</button>

score 0 · Answer 3 · answered Jan 23 '20 at 17:06

This sounds like what you are looking for. Let me know if it's doing what you want or if you don't understand the code

let inputs = document.querySelectorAll('.input');
let btn = document.querySelector('.btn');


btn.onclick = function() {
   var isEmpty = false;

   for (i = 0; i < inputs.length; i++) {      
         inputs[i].classList.remove("error__border");         
       }

   for (i = 0; i < inputs.length; i++) {
      if (inputs[i].value == "") {
         isEmpty = true;
      }
   }
   
   if(isEmpty){
      for (i = 0; i < inputs.length; i++) {      
         inputs[i].classList.add("error__border");
       }
   }else{ 
      console.log('it is working');
   }
   
  
   
  
}

.error__border {
  border: 1px solid red !important;
}

<input type="text" class="input"><br><br>
<input type="text" class="input"><br><br>
<button class="btn">Add</button>

How i can do that if inputs are empty nothing will happen

3 Answers3