SweetAlert — это популярная библиотека для создания красивых и информативных всплывающих окон в веб-приложениях. Одним из ключевых аспектов при работе с пользовательским интерфейсом является валидация данных. Для более гибкой и адаптируемой валидации в SweetAlert предусмотрены механизмы, позволяющие интегрировать кастомные проверки и сообщения об ошибках.
SweetAlert предоставляет возможность встроенной валидации для простых форм. Однако, в некоторых случаях требуется более сложная валидация, специфичная для бизнеса или пользовательских требований. В таких ситуациях можно задействовать кастомные функции валидации, которые позволят подстроить проверки под любые нужды.
Для использования кастомной валидации в SweetAlert необходимо определить функцию, которая будет проверять данные, введенные пользователем. Если данные не соответствуют заданным условиям, функция возвращает ошибку, а SweetAlert отобразит сообщение с описанием проблемы. Важно, чтобы механизм валидации работал в реальном времени или по запросу, не блокируя основной поток выполнения.
Для начала создадим простое всплывающее окно, которое будет содержать форму с текстовым полем. Мы применим кастомную валидацию для того, чтобы проверять, введено ли в поле значение, и соответствует ли оно определенным правилам.
Swal.fire({
title: 'Введите ваш email',
input: 'email',
inputPlaceholder: 'Email',
showCancelButton: true,
confirmButtonText: 'Отправить',
cancelButtonText: 'Отмена',
inputValidator: (value) => {
if (!value) {
return 'Поле не может быть пустым!';
}
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!emailRegex.test(value)) {
return 'Пожалуйста, введите корректный email!';
}
}
});В этом примере:
Если необходимо выполнить валидацию данных в другом контексте (например, в процессе отправки формы или после выполнения каких-либо действий), можно вручную вызвать проверку данных и отобразить сообщение с ошибкой.
function validateForm() {
const email = document.getElementById('emailInput').value;
Swal.fire({
title: 'Проверка данных',
text: 'Пожалуйста, проверьте ваши данные перед отправкой',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Отправить',
cancelButtonText: 'Отмена',
preConfirm: () => {
return new Promise((resolve, reject) => {
if (!email || !email.includes('@')) {
reject('Неверный email');
}
resolve();
});
},
}).then((result) => {
if (result.isConfirmed) {
console.log('Форма отправлена');
}
}).catch((error) => {
console.log(error); // Неверный email
});
}Здесь мы создаем функцию validateForm, которая проверяет
введенный email на соответствие минимальным требованиям. В случае ошибки
валидации пользователю будет выведено сообщение.
Кастомная валидация может включать асинхронные операции, такие как
проверка данных на сервере. SweetAlert поддерживает асинхронные операции
через промисы в методе inputValidator.
Пример асинхронной валидации email, проверяющей, зарегистрирован ли пользователь в системе:
Swal.fire({
title: 'Проверка email',
input: 'email',
inputPlaceholder: 'Введите email',
showCancelButton: true,
confirmButtonText: 'Проверить',
inputValidator: (value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (!value) {
reject('Email не может быть пустым!');
}
fetch('/check-email', {
method: 'POST',
body: JSON.stringify({ email: value }),
headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => {
if (!data.exists) {
reject('Этот email не зарегистрирован!');
} else {
resolve();
}
})
.catch(err => reject('Ошибка при проверке email'));
}, 1000); // Имитируем задержку
});
}
});В этом примере мы асинхронно отправляем запрос на сервер, чтобы проверить, зарегистрирован ли email пользователя. Если запрос успешен и email существует, валидация считается пройденной. В противном случае отображается ошибка.
Чтобы улучшить восприятие ошибок и сделать валидацию более информативной, можно использовать более сложные сообщения, например, отображение текста с HTML-разметкой или использование пользовательских иконок.
Swal.fire({
title: 'Ошибка!',
html: '<strong>Неверный email</strong><br>Пожалуйста, укажите корректный формат email.',
icon: 'error',
confirmButtonText: 'Попробовать снова',
timer: 3000 // Ошибка будет отображаться 3 секунды
});Здесь используется HTML-разметка, что позволяет выделить ошибку жирным шрифтом и добавить дополнительную информацию.
Если необходимо проверять несколько полей формы, можно использовать подобный подход, добавляя валидацию для каждого поля. Важно помнить, что каждый элемент формы должен быть обработан в отдельности.
Swal.fire({
title: 'Заполните все поля',
html: `
<input id="name" class="swal2-input" placeholder="Введите ваше имя">
<input id="email" class="swal2-input" placeholder="Введите ваш email">
`,
showCancelButton: true,
confirmButtonText: 'Отправить',
cancelButtonText: 'Отмена',
preConfirm: () => {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
if (!name) {
return Promise.reject('Имя не может быть пустым!');
}
if (!email || !email.includes('@')) {
return Promise.reject('Пожалуйста, введите корректный email!');
}
return Promise.resolve();
}
}).then((result) => {
if (result.isConfirmed) {
console.log('Форма отправлена');
}
}).catch((error) => {
console.log(error); // Появится ошибка, если не все поля заполнены
});В этом примере проверяются оба поля. Если одно из них не заполнено или не соответствует условиям, пользователь получит сообщение с ошибкой.
SweetAlert предоставляет гибкие возможности для кастомной валидации данных. Использование промисов, асинхронных запросов и кастомных сообщений делает валидацию удобной и эффективной. Поддержка динамических окон и форм в сочетании с возможностью интеграции серверных проверок позволяет значительно повысить качество взаимодействия с пользователем, обеспечивая быструю обратную связь и улучшая пользовательский опыт.