@Dutymy

Как оптимизировать валидацию формы?

Здравствуйте, у меня есть небольшая форма и мне нужно вывести alert в случае если она заполнена неверно.
Я делаю это с помощью
<form action="">
	<input type="text" required>
	<input type="text" required id="test">
	<button type="submit" onclick="submitForm()">send</button>
</form>
<script>
	function submitForm() {
		if (!document.querySelector('form').checkValidity()) {
			alert("invalid field");
		} else {
			alert("valid fields");
		}
	}
</script>

Однако я предполагаю что форма проверяется на подлинность и при checkValidity(),и при submit() - тогда получается что я проверяю ее дважды - сначала при кнопке и потом при отправке.
Эту гипотезу кажется подтверждает этот код
<form action="">
	<input type="text" required value="123">
	<input type="text" required id="test" value="123">
	<button type="submit" onclick="submitForm()">send</button>
</form>
<script>
	function submitForm() {
		if (!document.querySelector('form').checkValidity()) {
			alert("invalid field");
		} else {
			alert("valid fields");
		}
		document.getElementById("test").value = "";
	}
</script>

где после первой проверки формы одно поле опустошается. Могу ли я оптимизировать свой подход и вызывать проверку правильности заполнения только единожды. К примеру не проверяя форму при отправке во второй раз?
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 2
@zkrvndm
Боты, парсеры, расширения
Для валидации формы JS не нужен. Используйте атрибут pattern для полей:
https://webdesign.tutsplus.com/ru/tutorials/html5-...
Ответ написан
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
надо биндить событие submit формы, а не click кнопки
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы