Блог

Я использую функцию, которая, если пользователь оставил какой-либо ввод пустым, должна вывести сообщение об ошибке, в противном случае оно должно быть отправлено.

Я тестировал приведенный ниже код только для ввода имени, и он работает так, что если я оставлю ввод пустым, он покажет ошибку, в противном случае он будет отправлен.

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

Но поскольку у меня есть несколько входных данных, я хотел бы проверить их все, что я сделал здесь, я добавляю цикл for и сохраняю все сообщения, например, если пользователь оставил три входных данных пустыми, тогда он напечатает три сообщения об ошибке..

В противном случае, если пользователь заполнил все входные данные, он должен отправить их..

но проблема в том, что я что-то упускаю, потому что, если я заполню только один из входных данных, он будет отправлен! что мне следует сделать, чтобы прекратить отправку, если все значения не являются пустыми?

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

Это потому, что вы вызываете submit внутри for цикла, submit будет вызван при первом действительном вводе.

Вы можете провести рефакторинг следующим образом:

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

HTML имеет required атрибут для достижения этой цели. Если вы установите обязательный ввод, современные браузеры не позволят вам отправить форму, если эти поля пусты.

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

Есть ли какая-то конкретная причина, по которой вы хотите сделать это из javascript?

Если вы все еще хотите использовать свое решение, вам нужно настроить часть «отправить» так, чтобы она была вне цикла, что-то вроде этого:

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

Из того, что я вижу, вы отправляете слишком рано, вам следует сначала протестировать каждый ввод в вашем цикле for, установить логическое значение в false, как только вы найдете пропущенное значение. И только затем, вне цикла, проверьте, установлено ли для этого логического значения значение true, и отправьте, если оно есть.

Возможно, попробуйте проверить все поля ввода в одном операторе if.

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

Что — то вроде этого