html5 inputы, submit и javascript. Как подружить?

Question

[Dima]

Есть страница с формой

<form name="subscribe" action="" method="">
	<label for="name">Ваше имя:</label>
	<input id="name" name="name" type="text" required>
	<label for="phone">Ваш телефон:</label>
	<input id="phone" name="phone" type="phone" required>
	<label for="email">Ваш email:</label>
	<input id="email" name="email" type="email" required>
	<span id="mail-status"></span>
	<input type="submit" id="sendMail" value="Заказать" >Заказать</button>
</form>

и есть некий скрипт который отправляет на сервер POSTом данные c помощью AJAX.

mailButton = document.getElementById('sendMail');

	mailButton.onclick = function(){
		sendMail();
		return false;
	}

И все здорово работает, но хотелось бы использовать валидацию, которую предоставляет браузер. Например email. (Очень здорово, что такое есть. Хоть и не отменяет необходимость валидации на сервере)
Проблема в том, что при таком подходе она не работает. Браузер проверяет инпуты только перед отправкой формы submit-ом, а я не хочу, чтоб происходил сабмит, так как не хочу перезагрузки страницы с формой.
Есть ли вариант проверять содержимое встроенными средствами браузера, не отправляя её?
p.s. я конечно же знаю про то как проверить формы javascript-ом, но раз нужна поддержка только свежайших браузеров, почему бы не воспользоваться)

Answer 1

[Alexey Svirschevskiy]

Вешайте скрипт отправки формы не на клик, а на submit формы, тогда заработает стандартная валидация по html5 атрибутам type=emal, required и т.п.

В вашем случае сначала происходит отправка, потом валидация. В этом способе наоборот, сначала нативная валидация, потом submit.

document.subscribe.onsubmit = function (e){
     sendMail();
     e.preventDefault();
    }

Comments

[Dima]

Спасибо. Пойду дальше курить учебники)

Answer 2

[ozoned]

Метод checkValidity у элемента, событие когда элемент не прошел проверку — invalid.

Comments

[Dima]

Спасибо, я не знал об этом)). Кстати, так только поле email проверяется. А phone всегда true, только если не заполнено вообще - тогда false.

Answer 3

[dima_horror]

Для того что бы форма проверилась, повесьте событие не на кнопку, а на onsubmit. (Вернуть же false, что бы не отправлять).

С Вашего позволения, на JQuery:

$("form[name=subscribe]").submit(function(){
     sendMail();
     return false;
});

Comments

[Dima]

Неее, тянуть ради этого целый Jquery - не камильфо( у меня там всего три поля получить, да аяксом форму отправить и ответ получить. Лучше на VanilaJs