Check all values in for loop with if and else

Question

I'm using a function that if the user left any input empty then it should print an error msg, otherwise it should be submitted.

I was testing this below code for the name input only and it works that if I left the input empty it will show an error, otherwise it will do submit.

let submitFORM = document.forms[0][4].addEventListener("click", val);
let name = document.forms[0][0];
let error = document.getElementById("error");
function val() {
 if (!name.value) {
 error.innerHTML = "Error";
 return false;
 } else {
 document.forms[0].submit();
 }
}

But since I have multiple inputs, I would like to check on all of them, what I did here I add a for loop and store all the messages that like if the user left three inputs empty then it would print three statements of the error ..

Otherwise, if the user filled all the inputs, then it should submit it ..

but the issue is I miss something that because if I fill one of the inputs only it will do submit! what should I do to stop doing submitting unless all the values aren't empty?

let submitFORM = document.forms[0][4].addEventListener("click", val);
let name = document.forms[0][0];
let error = document.getElementById("error");
function val() {
 let allinputs = document.forms[0].querySelectorAll('input');
 let item = ""; 
 let i;
 let stat = true;
 for(i = 0; i < t.length - 1; i++){
 if(!t[i].value){
 item += "your " + t[i].getAttribute('name') + " shouldn't be blank !";
 stat = false;
 }else{
 stat = true;
 document.forms[0].submit();
 }
 } 
 error.innerHTML = item;
}

Answer 1

It's because, you are calling submit inside for loop, submit will be called on first valid input.

You can refactor like this:

const invalidInputs = allInputs.map(input => !input.value);
invalidInputs.forEach((input) => {
 item += "your " + input.getAttribute('name') + " shouldn't be blank !";
});
if (invalidInputs.length === 0) {
 document.forms[0].submit();
} 

Answer 2

HTML has the required attribute to accomplish this. If you set any input to be required, modern browsers won't let you submit the form if those fields are empty.

<input type="text" name="name" required="required">

Is there any specific reason why you want to do it from javascript?

If you still want to use your solution, you need to adjust the "submit" part to be out of the loop, something like this:

let submitFORM = document.forms[0][4].addEventListener("click", val);
let name = document.forms[0][0];
let error = document.getElementById("error");
function val() {
 let allinputs = document.forms[0].querySelectorAll('input');
 let item = "";
 let shouldSubmit = true;
 for(let i = 0; i < allinputs.length - 1; i++){
 if(!allinputs[i].value){
 item += "your " + allinputs[i].getAttribute('name') + " shouldn't be blank !";
 shouldSubmit = false;
 }
 }
 if (shouldSubmit) {
 document.forms[0].submit();
 } 
 error.innerHTML = item;
}

Answer 3

From what i see, you submit too soon, you should first test every input in your for loop, set a boolean to false as soon as you find a missing value. And only then, outside the loop, check if this boolean is set to true and submit if it is.

Answer 4

Maybe try to check all the input fields in a single if statement.

if(!t[0].value && !t[1].value && !t[2].value){}

Something like this