Взаимодействие с формами в JavaScript: обработка, валидация, API

// Получение формы по ID
const form = document.getElementById('registration-form');

// Получение элемента формы по имени
const emailInput = form.elements.email;

// Получение значения поля
const emailValue = emailInput.value;

// Текстовые поля
const username = form.elements.username.value;

// Checkbox
const isSubscribed = form.elements.subscribe.checked;

// Radio buttons
const selectedGender = Array.from(form.elements.gender)
.find(radio => radio.checked)?.value;

// Select
const country = form.elements.country.value;
const selectedIndex = form.elements.country.selectedIndex;
const selectedOption = form.elements.country.options[selectedIndex];

// File input
const fileInput = form.elements.avatar;
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
console.log(`File name: ${file.name}, size: ${file.size} bytes`);
}

form.addEventListener('submit', function(event) {
// Предотвращаем стандартную отправку формы
event.preventDefault();

// Получаем данные формы
const formData = new FormData(form);

// Выполняем валидацию
if (validateForm()) {
// Отправляем данные асинхронно
submitFormData(formData);
}
});

function validateForm() {
// Логика валидации
return true; // или false, если проверка не пройдена
}

async function submitFormData(formData) {
// Логика отправки данных
try {
const response = await fetch('/api/submit', {
method: 'POST',
body: formData
});
const result = await response.json();
showSuccess('Форма успешно отправлена!');
} catch (error) {
showError('Ошибка отправки формы');
}
}

const passwordInput = form.elements.password;
const strengthIndicator = document.getElementById('password-strength');

passwordInput.addEventListener('input', function() {
const strength = calculatePasswordStrength(this.value);

// Обновляем индикатор силы пароля
strengthIndicator.textContent = getStrengthLabel(strength);
strengthIndicator.className = `strength-${strength}`;
});

function calculatePasswordStrength(password) {
// Логика оценки силы пароля
let score = 0;

if (password.length >= 8) score++;
if (/[A-Z]/.test(password)) score++;
if (/[0-9]/.test(password)) score++;
if (/[^A-Za-z0-9]/.test(password)) score++;

return score;
}

function getStrengthLabel(strength) {
const labels = ['Очень слабый', 'Слабый', 'Средний', 'Хороший', 'Отличный'];
return labels[strength];
}

<form id="registration" novalidate>
<input type="email" name="email" required 
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

<input type="password" name="password" required 
minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">

<input type="tel" name="phone" 
pattern="[0-9]{10}" placeholder="10 цифр">

<button type="submit">Регистрация</button>
</form>

const form = document.getElementById('registration');

form.addEventListener('submit', function(event) {
// Отменяем отправку формы
event.preventDefault();

// Проверяем валидность формы
if (form.checkValidity()) {
// Форма валидна, можно отправлять
submitForm();
} else {
// Показываем собственные сообщения об ошибках
showCustomValidationMessages();
}
});

function showCustomValidationMessages() {
// Проверяем каждый элемент формы
Array.from(form.elements).forEach(input => {
if (input.nodeName.toLowerCase() !== 'button' && !input.validity.valid) {
// Получаем тип ошибки и показываем соответствующее сообщение
const errorType = getValidityErrorType(input.validity);
const errorMessage = getErrorMessage(input, errorType);

// Отображаем сообщение об ошибке
showError(input, errorMessage);
}
});
}

function getValidityErrorType(validity) {
if (validity.valueMissing) return 'required';
if (validity.typeMismatch) return 'type';
if (validity.patternMismatch) return 'pattern';
if (validity.tooShort) return 'minlength';
if (validity.tooLong) return 'maxlength';
if (validity.rangeUnderflow) return 'min';
if (validity.rangeOverflow) return 'max';
return 'invalid';
}

function getErrorMessage(input, errorType) {
const messages = {
required: 'Это поле обязательно для заполнения',
type: `Пожалуйста, введите корректный ${input.type}`,
pattern: 'Введенное значение не соответствует требуемому формату',
minlength: `Минимальная длина: ${input.minLength} символов`,
maxlength: `Максимальная длина: ${input.maxLength} символов`,
min: `Минимальное значение: ${input.min}`,
max: `Максимальное значение: ${input.max}`,
invalid: 'Некорректное значение'
};

return messages[errorType];
}

function showError(input, message) {
// Находим или создаем элемент для сообщения об ошибке
let errorElement = input.nextElementSibling;
if (!errorElement || !errorElement.classList.contains('error-message')) {
errorElement = document.createElement('div');
errorElement.classList.add('error-message');
input.parentNode.insertBefore(errorElement, input.nextSibling);
}

// Отображаем сообщение
errorElement.textContent = message;

// Добавляем класс ошибки к полю
input.classList.add('invalid');
}

// Класс для управления валидацией
class FormValidator {
constructor(form, config = {}) {
this.form = form;
this.config = config;
this.errors = {};

this.setupListeners();
}

setupListeners() {
// Обработка события отправки формы
this.form.addEventListener('submit', this.handleSubmit.bind(this));

// Обработка изменений в полях (опционально)
if (this.config.validateOnInput) {
this.form.addEventListener('input', this.handleInput.bind(this));
}
}

async handleSubmit(event) {
event.preventDefault();

const isValid = await this.validateAll();
if (isValid) {
this.submitForm();
} else {
this.showErrors();
}
}

handleInput(event) {
const field = event.target;
if (field.name && this.config.fields[field.name]) {
this.validateField(field);
}
}

async validateAll() {
this.errors = {};
const fields = this.config.fields || {};

// Собираем все валидации в массив промисов
const validations = Object.entries(fields).map(async ([name, rules]) => {
const field = this.form.elements[name];
if (!field) return true; // Поле не найдено

return await this.validateField(field, rules);
});

// Ждем завершения всех валидаций
const results = await Promise.all(validations);
return results.every(Boolean);
}

async validateField(field, rules = this.config.fields[field.name]) {
const value = field.value;
let isValid = true;

// Проверяем каждое правило
for (const rule of rules) {
const { type, message, validator } = rule;

switch (type) {
case 'required':
isValid = value.trim() !== '';
break;
case 'email':
isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
break;
case 'minLength':
isValid = value.length >= rule.value;
break;
case 'custom':
if (typeof validator === 'function') {
isValid = validator(value, this.form);
}
break;
case 'async':
if (typeof validator === 'function') {
try {
isValid = await validator(value, this.form);
} catch (e) {
isValid = false;
}
}
break;
}

if (!isValid) {
this.errors[field.name] = message;
break;
}
}

// Обновляем UI в соответствии с результатом
this.updateFieldUI(field, isValid);

return isValid;
}

updateFieldUI(field, isValid) {
const errorElement = this.getErrorElement(field);

if (isValid) {
field.classList.remove('invalid');
field.classList.add('valid');
errorElement.textContent = '';
errorElement.style.display = 'none';
} else {
field.classList.remove('valid');
field.classList.add('invalid');
errorElement.textContent = this.errors[field.name];
errorElement.style.display = 'block';
}
}

getErrorElement(field) {
const errorId = `error-${field.name}`;
let errorElement = document.getElementById(errorId);

if (!errorElement) {
errorElement = document.createElement('div');
errorElement.id = errorId;
errorElement.className = 'error-message';
field.parentNode.insertBefore(errorElement, field.nextSibling);
}

return errorElement;
}

showErrors() {
Object.entries(this.errors).forEach(([name, message]) => {
const field = this.form.elements[name];
if (field) {
this.updateFieldUI(field, false);
}
});
}

submitForm() {
if (this.config.onSuccess) {
this.config.onSuccess(this.form);
} else {
this.form.submit();
}
}
}

const validator = new FormValidator(document.getElementById('registration'), {
validateOnInput: true,
fields: {
email: [
{ type: 'required', message: 'Email обязателен' },
{ type: 'email', message: 'Введите корректный email' },
{ 
type: 'async', 
message: 'Этот email уже зарегистрирован',
validator: async (value) => {
const response = await fetch(`/api/check-email?email=${value}`);
const data = await response.json();
return !data.exists;
}
}
],
password: [
{ type: 'required', message: 'Пароль обязателен' },
{ type: 'minLength', value: 8, message: 'Пароль должен быть не менее 8 символов' },
{ 
type: 'custom', 
message: 'Пароль должен содержать буквы и цифры',
validator: (value) => /^(?=.*[A-Za-z])(?=.*\d).+$/.test(value)
}
]
},
onSuccess: (form) => {
const formData = new FormData(form);
fetch('/api/register', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
window.location.href = '/welcome';
}
});
}
});

const form = document.getElementById('upload-form');
const formData = new FormData(form);

// Теперь formData содержит все поля формы

const formData = new FormData();

// Добавление текстовых полей
formData.append('username', 'john_doe');
formData.append('email', 'john@example.com');

// Добавление файла
const fileInput = document.getElementById('profile-pic');
if (fileInput.files.length > 0) {
formData.append('profilePic', fileInput.files[0]);
}

// Добавление массива значений
const interests = ['programming', 'music', 'sports'];
interests.forEach(interest => {
formData.append('interests[]', interest);
});

const form = document.getElementById('file-upload');
const progressBar = document.getElementById('progress-bar');
const statusMessage = document.getElementById('status');

form.addEventListener('submit', function(event) {
event.preventDefault();

const formData = new FormData(form);
const xhr = new XMLHttpRequest();

// Настройка обработчиков событий
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
const percentComplete = Math.round((e.loaded / e.total) * 100);
progressBar.value = percentComplete;
statusMessage.textContent = `Загружено ${percentComplete}%`;
}
});

xhr.addEventListener('load', function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
statusMessage.textContent = 'Файл успешно загружен!';
showUploadedFilePreview(response.fileUrl);
} else {
statusMessage.textContent = 'Ошибка при загрузке файла';
}
});

xhr.addEventListener('error', function() {
statusMessage.textContent = 'Произошла ошибка сети';
});

// Отправка данных
xhr.open('POST', '/api/upload', true);
xhr.send(formData);
});

function showUploadedFilePreview(url) {
const previewContainer = document.getElementById('preview');
if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
const img = document.createElement('img');
img.src = url;
img.className = 'upload-preview';
previewContainer.innerHTML = '';
previewContainer.appendChild(img);
} else {
previewContainer.innerHTML = `<a href="${url}" target="_blank">Просмотреть загруженный файл</a>`;
}
}

const form = document.getElementById('user-form');
const formData = new FormData(form);

// 1. Преобразование в обычный объект JavaScript
const formObject = {};
for (let [key, value] of formData.entries()) {
if (key in formObject) {
if (!Array.isArray(formObject[key])) {
formObject[key] = [formObject[key]];
}
formObject[key].push(value);
} else {
formObject[key] = value;
}
}

// 2. Преобразование в JSON-строку
const jsonData = JSON.stringify(formObject);

// 3. Преобразование в строку запроса (query string)
const queryString = new URLSearchParams(formData).toString();
// Результат: "username=john&email=john%40example.com&interests%5B%5D=music"

// 4. Отправка в разных форматах
// 4.1. Отправка как FormData (multipart/form-data)
fetch('/api/submit', {
method: 'POST',
body: formData
});

// 4.2. Отправка как JSON
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: jsonData
});

// 4.3. Отправка как URL-encoded
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: queryString
});

const form = document.getElementById('contact-form');
const submitButton = form.querySelector('button[type="submit"]');
const statusMessage = document.getElementById('form-status');

form.addEventListener('submit', async function(event) {
event.preventDefault();

// Показываем состояние загрузки
setFormState('loading');

try {
const formData = new FormData(form);

const response = await fetch('/api/contact', {
method: 'POST',
body: formData,
headers: {
// Заголовки не нужны при использовании FormData,
// браузер автоматически установит Content-Type как multipart/form-data
'X-Requested-With': 'XMLHttpRequest'
}
});

// Проверяем HTTP-статус ответа
if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`);
}

const result = await response.json();

if (result.success) {
// Обрабатываем успешный ответ
setFormState('success', result.message || 'Сообщение отправлено успешно!');
form.reset(); // Очищаем форму
} else {
// Сервер вернул ошибку в ответе JSON
setFormState('error', result.message || 'Произошла ошибка при отправке формы.');
}
} catch (error) {
// Обрабатываем исключения (сетевые ошибки и т.д.)
console.error('Form submission error:', error);
setFormState('error', 'Не удалось отправить форму. Пожалуйста, попробуйте позже.');
}
});

function setFormState(state, message = '') {
// Сбрасываем предыдущие состояния
form.classList.remove('loading', 'success', 'error');
submitButton.disabled = false;

if (state === 'loading') {
form.classList.add('loading');
submitButton.disabled = true;
statusMessage.textContent = 'Отправка...';
statusMessage.className = 'status-message loading';
} else if (state === 'success') {
form.classList.add('success');
statusMessage.textContent = message;
statusMessage.className = 'status-message success';
} else if (state === 'error') {
form.classList.add('error');
statusMessage.textContent = message;
statusMessage.className = 'status-message error';
}
}

function submitFormXHR(form, options = {}) {
const xhr = new XMLHttpRequest();
const formData = new FormData(form);

// Настройка по умолчанию
const defaults = {
method: 'POST',
url: form.action || window.location.href,
onSuccess: function(response) { console.log('Success:', response); },
onError: function(error) { console.error('Error:', error); },
onProgress: function(percent) { console.log('Progress:', percent); }
};

// Объединяем настройки
const settings = Object.assign({}, defaults, options);

// Настройка обработчиков событий
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // Запрос завершен
if (xhr.status >= 200 && xhr.status < 300) {
let response;
try {
response = JSON.parse(xhr.responseText);
} catch (e) {
response = xhr.responseText;
}
settings.onSuccess(response);
} else {
settings.onError({
status: xhr.status,
statusText: xhr.statusText,
response: xhr.responseText
});
}
}
};

if (xhr.upload && settings.onProgress) {
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percent = Math.round((event.loaded / event.total) * 100);
settings.onProgress(percent);
}
};
}

// Открываем соединение и отправляем запрос
xhr.open(settings.method, settings.url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(formData);

return xhr; // Возвращаем объект XHR для возможности отмены запроса
}

// Пример использования
const form = document.getElementById('product-form');
form.addEventListener('submit', function(event) {
event.preventDefault();

const progressBar = document.getElementById('progress');

submitFormXHR(form, {
url: '/api/products/create',
onSuccess: function(response) {
alert('Продукт успешно создан!');
window.location.href = `/products/${response.id}`;
},
onError: function(error) {
alert(`Ошибка при создании продукта: ${error.status} ${error.statusText}`);
},
onProgress: function(percent) {
progressBar.value = percent;
progressBar.textContent = `${percent}%`;
}
});
});

const form = document.getElementById('search-form');
const searchInput = document.getElementById('search-query');
const resultsContainer = document.getElementById('search-results');
let controller = null; // Для хранения контроллера текущего запроса

searchInput.addEventListener('input', function() {
// Отменяем предыдущий запрос, если он еще выполняется
if (controller) {
controller.abort();
}

const query = this.value.trim();
if (!query) {
resultsContainer.innerHTML = '';
return;
}

// Создаем новый контроллер для этого запроса
controller = new AbortController();
const signal = controller.signal;

// Запрашиваем результаты поиска
performSearch(query, signal);
});

async function performSearch(query, signal) {
try {
resultsContainer.innerHTML = '<div class="loading">Поиск...</div>';

const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
method: 'GET',
signal: signal // Передаем сигнал для возможности отмены
});

const data = await response.json();

// Если запрос был отменен, эта часть кода не выполнится
displayResults(data.results);
} catch (error) {
if (error.name === 'AbortError') {
console.log('Поисковый запрос был отменен');
} else {
resultsContainer.innerHTML = '<div class="error">Ошибка при выполнении поиска</div>';
console.error('Search error:', error);
}
}
}

function displayResults(results) {
if (results.length === 0) {
resultsContainer.innerHTML = '<div class="no-results">Ничего не найдено</div>';
return;
}

const html = results.map(item => `
<div class="search-result">
<h3>${item.title}</h3>
<p>${item.description}</p>
</div>
`).join('');

resultsContainer.innerHTML = html;
}