Как сделать отмену отправку формы, если не пройдена валидация полей?

Question

[svm2001]

Итак, если все 4 условия выполняются, ничего не происходит и пусть форма отправляется, т.к. валидация пройдена. Если хотя бы 1 из условий не выполнено (например номер не введен полностью), то нужно отменить стандартное поведение кнопки input type="submit". Подскажите, что я не так делаю?

Отправщик настроен другим человеком и форма всегда отправляется мне на почту вне зависимости от заполненности полей. Также если хотя бы 1 из условий не выполняется, мне выскакивает алерт о том что валидация не пройдена - alert('Валидация не пройдена!') - это строка отрабатывает. А preventDefault - нет, все равно отправляется

const kommerchBtn = document.querySelector('.kommerch-btn');

	if(kommerchBtn) {
		kommerchBtn.addEventListener('click', (e) => {
			let kommerchName = document.querySelector('.kommerch-input-name').value.length;
			let kommerchTel = document.querySelector('.kommerch-input-tel').value.length;
			let kommerchEmail = document.querySelector('.kommerch-input-email').value.length;
			let kommerchMessage = document.querySelector('.kommerch-input-message').value.length;

			if (kommerchName >= 2 && kommerchTel === 18 && kommerchEmail >= 9 && kommerchMessage >= 3) {
				alert ('Валидация пройдена')
			} else {
				document.querySelector('.kommerch-btn').preventDefault();
				alert('Валидация не пройдена!')
			}
		})
	}

Answer 1

[Александр]

document.querySelector('form')?.addEventListener('submit', (event) => {
    const form = new FormData(event.currentTarget);
    let isValid = true;
    
    if (form.get('name').length <= 2) {
        isValid = false;
    }
    
    if (!isValid) {
        // Отмена отправки формы
        event.preventDefault();
    }
    
    alert(`Is Valid: ${isValid}`);
});

Comments

[svm2001]

в строке "if (form.get('name').length <= 2) {" что такое 'name'?

[Александр]

svm2001, Имя вашего поля. <input type="text" name="name" />

[svm2001]

Александр, здоровья Вам и близким. Большое спасибо!