Как реализовать валидацию на ошибки пользователя с использованием jQuery или JavaScript?

Как я могу определить, какие поля валидации блокируют отправку формы через AJAX, учитывая, что валидация осуществляется без добавления классов и с помощью конструкций, подобных следующему коду: 

<pre><code class="javascript">let localDisabled = [];
if (input.value.length != 0) {
    localDisabled = [...localDisabled, false];             
} else {
    localDisabled = [...localDisabled, true];
}</code></pre> 

Кроме того, используется CSS-стилизация для визуального обновления элементов с классом :user-invalid?
  • 9 декабря 2024 г. 18:13
Ответы на вопрос 1
Для реализации валидации при работе с формами через AJAX с использованием JavaScript или jQuery, можно использовать следующий подход:

1. **Валидация полей**: Проверяем каждое поле формы и сохраняем результаты в массив `localDisabled`.

2. **Отправка формы**: Если массив `localDisabled` не содержит значений `true`, то форма отправляется через AJAX.

3. **Визуальная индикация ошибок**: Устанавливаем CSS-классы для полей с ошибками.

Вот пример кода, который демонстрирует описанный процесс:

```html
<form id="myForm">
    <input type="text" id="name" placeholder="Имя">
    <input type="email" id="email" placeholder="Email">
    <button type="submit">Отправить</button>
</form>
<div id="errorMessages"></div>

<style>
    .user-invalid {
        border: 2px solid red;
    }
</style>

<script>
document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault(); // Предотвращаем обычную отправку формы

    let localDisabled = [];
    let errorMessages = [];

    const nameInput = document.getElementById('name');
    const emailInput = document.getElementById('email');

    // Проверка поля имени
    if (nameInput.value.length === 0) {
        localDisabled.push(true);
        nameInput.classList.add('user-invalid');
        errorMessages.push('Имя не должно быть пустым.');
    } else {
        localDisabled.push(false);
        nameInput.classList.remove('user-invalid');
    }

    // Проверка поля email
    if (emailInput.value.length === 0 || !validateEmail(emailInput.value)) {
        localDisabled.push(true);
        emailInput.classList.add('user-invalid');
        errorMessages.push('Введите корректный email.');
    } else {
        localDisabled.push(false);
        emailInput.classList.remove('user-invalid');
    }

    // Если есть недопустимые поля, выводим сообщение об ошибке
    const hasErrors = localDisabled.includes(true);
    document.getElementById('errorMessages').innerText = hasErrors ? errorMessages.join('\n') : '';

    // Если всё в порядке, отправляем форму через AJAX
    if (!hasErrors) {
        submitForm();
    }
});

// Функция для проверки корректности email
function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email.toLowerCase());
}

// Функция отправки формы через AJAX
function submitForm() {
    const formData = new FormData(document.getElementById('myForm'));

    fetch('your-endpoint-url', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // Обработка успешного ответа от сервера
        console.log(data);
    })
    .catch(error => {
        // Обработка ошибки
        console.error('Error:', error);
    });
}
</script>
```

### Основные моменты:
1. **Валидация**: В нашем примере мы проверяем, что поля не пустые и что email имеет корректный формат.
2. **CSS стилизация**: Если поле недопустимо, к нему добавляется класс `user-invalid`, иначе класс удаляется.
3. **Отправка формы**: Если все проверки пройдены, форма отправляется с помощью `fetch` (или `XMLHttpRequest`, если требуется).
4. **Обработка ошибок**: Выводим сообщения об ошибках в блоке `errorMessages`.

Этот подход обеспечит вам простую валидацию без использования дополнительных библиотек и с гибким контролем за процессом отправки формы через AJAX.
Похожие вопросы