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!

Answer 1

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>

Answer 2

You could with Array#every

1. Array#from convert nodelist to Array.

2. Then use Array#every to check all the value are not empty

3. Then you can add the class on else statement

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

Answer 3

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>