Отправка формы средствами JavaScript с прохождением встроенной валидации браузера HTML5

Получилось немного заумное название, но смысл от этого не меняется.

Итак, наша задача, чтоб при нажатии на кнопку отправки формы обработчику Submit, выполнилась встроенная в браузер проверка формы, например на обязательные поля, но после неё выполнилась не стандартная функция отправки формы, а наша, написанная на JavaScript.

В данном случаем будем использовать javascript framework jQuery. Так проще обращаться к дереву DOM.

Отправка формы средствами JavaScript с прохождением встроенной валидации браузера HTML5

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

<form id="test-form">
    <input type="text" required="" id="test" /><br />
    <input type="submit" value="Отправить форму" />
</form>
<script type="text/javascript">
$("#test-form").on('submit', function(e){ // создаём обработчик события
    e.preventDefault(); // перехватываем стандартное событие и не выполняем его
    alert($('#test').val()); // выполняем свой код
});
</script>

Пример рабочий, можете пробовать!

Комментарии (0)

RSS свернуть / развернуть
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.
comments powered by Disqus