Получить профессию в Skypro
"Обработка события отправки формы в JavaScript без HTML"
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Обработка события отправки формы и предотвращение её стандартной перезагрузки возможно с помощью метода addEventListener и функции event.preventDefault() внутри обработчика события. После этого вы можете провести валидацию данных или отправить их на сервер:
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // Предотвращаем перезагрузку страницы.
// Обрабатываем данные формы...
console.log('Форма отправлена. Отмечаем это!');
});Таким образом, используя querySelector(), мы находим форму, а с помощью event.preventDefault() получаем полный контроль над процессом её отправки.
Дальше – больше: обработка событий и валидация форм
Универсальная регистрация обработчиков событий
Для поддержки совместимости с разными браузерами, стоит проверить наличие метода addEventListener и в случае его отсутствия использовать attachEvent:
var form = document.querySelector('form');
function onSubmit(event) {
event.preventDefault();
// Дальнейшая обработка формы...
}
// Выбираем метод, который будем использовать.
if (form.addEventListener) {
form.addEventListener('submit', onSubmit);
} else if (form.attachEvent) {
form.attachEvent('onsubmit', onSubmit);
}Валидация HTML5: ваш первый защитник
HTML5 предоставляет встроенную валидацию для форм, но в случае старых браузеров хорошим решением будет запасной вариант валидации на JavaScript:
if (form.checkValidity === undefined) {
// Валидация на стороне JavaScript для старых браузеров.
form.addEventListener('submit', function(event) {
var isValid = /* вставьте сюда свою логику валидации */;
if (!isValid) {
event.preventDefault();
alert('Форма заполнена некорректно. Поправите, пожалуйста.');
}
});
} else {
// иначе доверяем валидации HTML5
form.setAttribute('novalidate', true);
}Управление несколькими формами и библиотеками
Для обработки отправки нескольких форм достаточно использовать метод forEach:
// Слушаем отправку каждой формы.
Array.from(document.querySelectorAll('form')).forEach(function(form) {
form.addEventListener('submit', onSubmit);
});Создание библиотеки для независимой валидации:
// FormValidator – ни одна ошибка не останется незаметной!
function FormValidator(selector, callback) {
this.forms = document.querySelectorAll(selector);
this.forms.forEach(function(form) {
form.addEventListener('submit', function(event) {
event.preventDefault();
var isValid = callback(form);
if (isValid) {
form.submit();
}
});
});
}
// Пример использования FormValidator.
new FormValidator('form', function(form) {
// Реализация вашей валидации.
return true; // или false в зависимости от результата.
});Визуализация
Отправку формы можно сравнить с криком монстра (👹), а обработчик событий JavaScript – с смелым охотником (🏹):
При крике монстра (форма отправляется):
1. Сигнал (📢) подает тревогу.
2. Охотник (🏹) и его команда готовы вступить в бой.В коде это будет выглядеть следующим образом:
form.addEventListener('submit', (event) => {
event.preventDefault(); // Останавливаем крик монстра (👹)!
// Охотник (🏹) готов к действию!
});Описанным действиям соответствует следующая последовательность:
👹: Монстр (отправленная форма) готовится.
Пользователь запускает крик (отправка формы) -> 📢: Звучит сигнал тревоги.
🏹: Охотник (обработчик событий) управляет криком (отправкой формы).Смелым охотникам (🏹) удалось справиться с монстровским криком (📢)!
Приспособленность к фреймворкам
Отправка формы в AngularJS
В AngularJS все действия по отправке формы следует контролировать через создание директивы:
app.directive('myForm', function() {
return {
require: 'form',
link: function(scope, element, attrs, form) {
element.on('submit', function(event) {
scope.$apply(function() {
if (form.$valid && scope.customIsValid) {
// Все проверки пройдены, форма отправлена...
} else {
event.preventDefault();
}
});
});
}
};
});Работа с формами в React
В React для контроля действий используется свойство onSubmit:
class MyForm extends React.Component {
handleSubmit(event) {
event.preventDefault();
if (this.isValid(this.state)) {
// Данные формы проверены и готовы к обработке!
}
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
{/* Элементы формы */}
</form>
);
}
}Гибкость и ориентированность на пользователя
Не забывайте, что формы созданы для пользователей, поэтому важно создавать удобный и интуитивно понятный интерфейс, отображать обратную связь при валидации и объяснять ошибки рядом с соответствующими полями. Работайте над библиотекой валидации, которая будет легко интегрироваться с различными шаблонами и фреймворками.
Полезные материалы
- HTMLFormElement: submit event – Web APIs | MDN — детальное руководство по обработке событий отправки формы на чистом JavaScript.
- JavaScript DOM EventListener — информация о использовании DOM EventListeners в контексте отправки форм.
- Form properties and methods — подробное объяснение и примеры работы с элементами форм и их отправкой на JavaScript.
- Event: preventDefault() method – Web APIs | MDN — информация о предотвращении стандартного поведения при отправке формы.
- Just a moment... — полезный материал на Stack Overflow с практическими советами и решениями от сообщества относительно добавления обработчиков событий к нескольким формам.