Как правильно воспользоваться событием onsubmit?

Question

[Mikhail Rerberg]

Всем привет!

Задача:
При отправке формы нужно проверить правильно ли заполнены поля и если какие-то поля заполнены неверно, то нужно выделить неверные поля красной рамкой.

Код:
https://jsfiddle.net/822ewjbc/

Я сделал примитивную проверку через обработчик событий "invalid", при нажатии на кнопку или enter форма отправляется. Потом я решил усовершенствовать код и вычитал про onsubmit.
Но как только я пытаюсь им воспользоваться,пропадают кастомные сообщения,что говорит о том,что я что-то неправильно делаю.

Comments

[Kovalsky]

Лол, в вашем коде просто нету обработчика события submit.

[Mikhail Rerberg]

Никита Полевой, то,что у меня есть,работает,но когда я пытаюсь это записать в обработчик события submit,то кастомные сообщения сразу пропадают.

[ой всё]

так а где в вашем коде написано "onsubmit"?

[Mikhail Rerberg]

ой всё, я делал через invalid,но хотел бы узнать,как это можно сделать через submit

[ой всё]

ничего, не поняла
ваш вопрос в заголовке: "Как правильно воспользоваться событием onsubmit?"

где в вашем коде написано это событие? - onsubmit

[Mikhail Rerberg]

ой всё, хорошо,давайте так:
1) Передо мной стояла задача провести валидацию формы
2) Я сделал это через invalid
3) Потом я понял,что код нужно улучшить,скорее всего воспользовавшись onsubmit
4) Но так как у меня не получалось сделать этого,я пошел и задал вопрос.

Зачем мне скидывать код,который не работает?

[ой всё]

Mikhail, что вам мешает посмотреть документацию по onsubmit и сделать аналогично, а потом уже разговаривать предметно?

[Mikhail Rerberg]

ой всё, мне ничего не мешает,я так и сделал,но таким образом валидация не проходит.
По сути,на любой вопрос,заданный на этом сайте,можно ответить: "что вам мешает посмотреть документацию и сделать аналогично?"

[ой всё]

Mikhail, совершенно верно, но при этом вы так и не предоставили код, который использует событие onsubmit и который не работает так, как вам нужно

кроме документации есть еще масса opensource cms, в которых легко можно найти нужный вам код и изучить его вместо того, чтобы задавать некорректные вопросы

Answer 1

[Exploding]

О Юпитер! Не надо вообще никаких обработчиков!
Обычная html форма с обычной кнопкой сабмита, как в старые добрые 2000-е))
Иными словами снесите вообще js.
А для валидации используйте параметр тега require. Вот и всего делов.
Если нужно, можно также использовать патерны регулярок, на соответствие не только длины, а и шаблону (тел., почта...), в параметре тега pattern.
А onsubmit нужно использовать для более расширенной проверки js-ом перед отправкой формы, или если нужно отправить форму аяксом. Не забудьте при этом отменить стандартное поведение с помощью event.preventDefault();

$("form").on("submit", function(event){
		
		event.preventDefault();
		
		var formData = $("form").serialize();
		
		$.ajax({
			dataType: "html",
			url: "myUrl.php",
			cache: false,
			type: "POST",
			data: formData,
			success: function(msg){
				console.log(msg);
			},
			error:function(jqXHR, textStatus){
				alert(textStatus);
			}
		});
	});

Comments

[Mikhail Rerberg]

Спасибо за совет)
Но,к сожалению,от меня требуется сделать через js ;c

[Exploding]

Mikhail, ну тогда вот:

$("form").on("submit", function(event){
		
		event.preventDefault();
		
		var formData = $("form").serialize();
		
		$.ajax({
			dataType: "html",
			url: "myUrl.php",
			cache: false,
			type: "POST",
			data: formData,
			success: function(msg){
				console.log(msg);
			},
			error:function(jqXHR, textStatus){
				alert(textStatus);
			}
		});
	});

[Mikhail Rerberg]

Exploding, благодарю!