Как правильно сделать проверку поля?

Question

[testkeyc]

Есть поле к которому я подключаюсь по селектору. Нужно сделать так, если поле содержит в себе 5, то данные отправляются иначе сообщение, что ошибка. Что я сделал не так?

let capcha =  document.querySelector('#capcha');

if(capcha.value == 5) {
	let form = document.querySelector('#form');

form.addEventListener('submit', function(evt) {
	evt.preventDefault();
	
	if (document.querySelector('#hidden').value) return

		let formData = {
			name: document.querySelector('input[name="name"]').value,
			phone: document.querySelector('input[name="phone"]').value,
			email: document.querySelector('input[name="email"]').value,
			textarea: document.querySelector('textarea[name="textarea"]').value,
		};

		var request = new XMLHttpRequest();

		request.addEventListener('load', function() {
			alert('Ваша заявка успешно отправлена!');
			form.innerHTML = '<h2 class="form__height">Спасибо за заявку!</h2>';
		});

		request.open('POST', './mail.php', true);
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
		request.send('name=' + encodeURIComponent(formData.name) + '&phone=' + encodeURIComponent(formData.phone) + '&email=' + encodeURIComponent(formData.email) + '&textarea=' + encodeURIComponent(formData.textarea) );
	});
} else {
	alert('Проверьте правильность введенных данных')
}

Answer 1

[Stalker_RED]

в браузерах есть встроенная валидация

Answer 2

[Alex]

Во первых
не знаю что там у вас в html, но этот паттерн стоит добавить к полю, примерно так:
<input type="text" required pattern=".*5.*">

Во вторых,

let capcha =  document.querySelector('#capcha');
debugger; // Посмотрите что у вас в переменной

// или
console.log(capcha.value) // Посмотрите какое значение приходит

И в третьих, если у вас очень большая секция if, то её лучше переписать так:

if(capcha.value != 5) {
  alert('Проверьте правильность введенных данных'); // показать ошибку
  return; // прекратить выполнение
}

let form = document.querySelector('#form');
// ... и дальше остальной код

UPD
В четвертых не используйте XMLHttpRequest
Я вот смотрю ваш код и его сложно читать. Вам самому то норм?

UPD 2
Проверка на значение поля capcha должно быть внутри обработчика события submit.
Возможно в этом и есть ваша ошибка.

UPD 3
А ещё у вас может быть проблема с полями. Если какие-то поле будет не найдено — весь скрипт упадёт.

Провели б рефакторинг, сразу бы нашли проблему:

const form = document.body.querySelector("form");
form.addEventListener("submit", function(event) {
  event.preventDefault();

  const capcha = form.querySelector("#capcha");
  if (!capcha.value || !capcha.value.includes('5')) {
    alert("Проверьте правильность введенных данных");
    return;
  }

  // const hidden = form.querySelector("#hidden")
  // if (hidden && hidden.value) {
  //   alert("Непонятная ошибка");
  //   return;
  // }

  const formData = {
    name: form.querySelector('input[name="name"]').value,
    phone: form.querySelector('input[name="phone"]').value,
    email: form.querySelector('input[name="email"]').value,
    textarea: form.querySelector('textarea[name="textarea"]').value
  };

  fetch(form.action, {
    method: "POST",
    
    // Для совместимости с оригинальным решением
    "Content-Type": "application/x-www-form-urlencoded",
    body: Object.entries(formData)
      .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
      .join('&')
    
    // 'Content-Type': 'application/json',
    // body: JSON.stringify(formData)
  })
  .then(() => {
    alert('Ваша заявка успешно отправлена!');
    form.innerHTML = '<h2 class="form__height">Спасибо за заявку!</h2>';
  })
});

Comments

[testkeyc]

значение поля

[Alex]

testkeyc, А какое?