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

Question

[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>

где после первой проверки формы одно поле опустошается. Могу ли я оптимизировать свой подход и вызывать проверку правильности заполнения только единожды. К примеру не проверяя форму при отправке во второй раз?

Answer 1

[Надим]

Для валидации формы JS не нужен. Используйте атрибут pattern для полей:
https://webdesign.tutsplus.com/ru/tutorials/html5-...

Comments

[Dutymy]

Спасибо, но мне нужно вывести алерт о неправильно заполненой форме, если я использою oninvalid на инпутах - получу два алерта а не один... Простите, но я не знаю как вызвать alert в таком случае...

[Надим]

Dutymy, там в конце статьи есть пример как на js отменить действие по умолчанию. Вам ни что не мешает вместо вывода модалки выводить Алерт.

[Dutymy]

Позвольте спросить имели ли вы ввиду такой код

<form action="">
	<input type="text" required oninvalid="invalid(event)">
	<input type="text" required oninvalid="invalid(event)">
	<button type="submit" onclick="submitForm()">send</button>
</form>
<script>
	function invalid(event) {
		event.preventDefault();
		alert("invalid field");
	}
</script>

Но тогда мне покажутся 2 алерта для каждого неправильно заполненного инпута, а я хотел бы чтоб алерт указывал на неправильно заполненою форму (вывелся только один раз вне зависимости от количества неправильных импутов)

Answer 2

[Антон Шаманов]

надо биндить событие submit формы, а не click кнопки

Comments

[Dutymy]

Спасибо, действительно работает, но можно ли спросить почему checkValidity в onsubmit проверяет форму только один раз...

[Антон Шаманов]

Dutymy, вопрос не верно стоит - при нажатии на кнопку c type="submit" происходит отправка данных и вызывается нативная проверка полей, но т.к. у тебя на click висит обработчик, то вначале вызывается submitForm

[Надим]

Антон Шаманов, тогда вам нужно перехватить сначала событие отправки формы и уже затем делать проверку.

[Антон Шаманов]

Надим Закиров, так я это и написал и не мне, а Dutymy

[Надим]

Антон Шаманов, сорри, не посмотрел)

[Dutymy]

Антон Шаманов,
Я поекспериментировал, но оказалось что код

<form action="" onsubmit="sub()" id="f">
  <input type="text" required>
  <input type="text" required id="test">
  <button type="submit">send</button>
</form>
<script>
  function sub() {
  alert("checking");
    if (!document.getElementById("f").checkValidity()) {
      alert("invalid fields");
    } else {
      alert("valid fields");
    }
  }
</script>

Никогда не выведет invalid fields похоже потому что событие onsubmit="sub()" вызывается только при успешном прохождении валидации... можно ли как-то это исправить

[Антон Шаманов]

Dutymy, я с нативным js плохо знаком в jquery:

$('#f > button').on('click', function (event) {
    event.preventDefault(); // отменяем нативные действия
    alert("checking");
    if (!document.getElementById("f").checkValidity()) {
      alert("invalid fields");
    } else {
      alert("valid fields");
    }
})