Как провести валидацию пустых полей?

Question

[accountnujen]

У меня есть FormData. Перед отправкой мне нужно получить значение всех полей и я выполняю цикл for. У меня есть такие поля:

• имя
  
• фамилия
  
• день рождения
  
• фото
  • либо из интернета
  • либо с компьютера.
  
  

В этом цикле for я хочу одновременно и получить значения всех полей и провести валидацию. Единственное условие валидации для меня - это то, чтобы поля были не пустые. Б'ольшая точность мне не требуется. Встроенная валидация в браузере (html) меня не устраивает. Для анимирования ошибки у меня есть функция anim, которая принимает аргумент - id того input, который нужно анимировать. Id и Name у меня одинаковые поэтому проблем с этим нет. У меня сейчас вот такая конструкция:

const t = {};
const n = new FormData(this);
for (let [e, a] of n.entries()) {
t[e] = a;
if (a === "") {
anim(e);
}
}

проблема в том, что если у меня пользователь выбрал вариант фото "загрузить с компьютера", то на моменте фото "ссылка из интернета" у меня произойдёт выполнение функции anim(). Но она должна произойти только в том случае, если фото нет в обоих случаях. Как мне сделать так, чтобы функция anim сработала если пользователь не выбрал ни один из способов загрузки фотографии?

Comments

[Kentavr16]

Из одного цикла ничего не понятно.

. моменте фото "ссылка из интернета" у меня произойдёт выполнение функции anim()

почему? Ты это в сабмите обрабатывает?

[accountnujen]

document.querySelector("#forma").addEventListener("submit", async function (e) {
  e.preventDefault();

const t = {};
const n = new FormData(this);
...
});

перебираются все поля. у меня 5 поеей. 4 и 5 "поля" отвечают за фото. Поле 5 может быть заполнено, а 4 - нет, поэтому у меня сработает анимация, которая срабатывать не должна

[ksnk]

Тут нужно разделить поля по правилам валидации.

const n = new FormData(this);
// зачем тут был нужен t ? 
// правила - имя поля: ['правило', параметры...]
const rules={
  '_': ['nempy'], // по умолчанию будем проверять на непустое значение
  'frominternet': ['or','fromcomputer','frominternet'], // здесь имена полей, в которых обязано быть хотя бы одно непустое значение
  'fromcomputer': ['or','fromcomputer','frominternet']
}
for (let [e, a] of n.entries()) {
    let rule=rules[e]||rules['_'];
    if(rule[0]==='nempty'){
        if (n.get(e) === ""){
            anim(e);
        }
    } else if (rule[0]==='or') {
        let found=false;
        for(let i=1;i<rule.length;i++){
            if (n.get(rule[i]) !== "") found=true;
        }
        if(!found){
            anim(e);
        }
    }
}

Ну и на сервере все равно нужно валидировать. Даже если броузер что-то там провалидировал.

P.S. писал прямо сюда, без проверки, нужно проверить на синтаксис

[Михаил Ливач]

я бы:

1. поставил валидацию на событие потери фокуса инпута;
   
2. при сабмите триггерил бы валидатор на каждом инпуте ( не зная, что этот валидатор делает);
   
3. если все валидаторы отработали положительно - только после этого собирал и отправлял данные формы.