Как написать простую валидацию формы на jQuery

Валидация формы — важный этап разработки веб-приложений. Она помогает предотвратить отправку некорректных данных и улучшает пользовательский опыт. В этой статье мы разберем, как написать простую валидацию для формы с полями имени, телефона и email с использованием jQuery.

HTML-форма

Начнем с базовой HTML-разметки формы:

<form id="contactForm" method="POST" action="#">
    <div class="form-group">
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name" placeholder="Введите ваше имя" required>
        <span class="error-message"></span>
    </div>
    
    <div class="form-group">
        <label for="phone">Телефон:</label>
        <input type="text" id="phone" name="phone" placeholder="Введите ваш телефон" required>
        <span class="error-message"></span>
    </div>
    
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Введите ваш email">
        <span class="error-message"></span>
    </div>
    
    <button type="submit">Отправить</button>
</form>

Что важно в этой разметке?

• Каждое поле имеет name и id для удобства обращения.
• Поля name и phone обязательны (required).
• Для вывода ошибок добавлены <span class="error-message">.

jQuery-валидация формы

Теперь напишем скрипт, который будет проверять данные перед отправкой.

1. Подключение jQuery

Убедитесь, что jQuery подключен:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Основная логика валидации

$(document).ready(function() {
    $('#contactForm').on('submit', function(e) {
        e.preventDefault(); // Отменяем стандартную отправку
        
        let isValid = true; // Флаг валидности формы
        $('.error-message').text(''); // Очищаем предыдущие ошибки
        
        // Валидация имени (минимум 3 символа)
        const name = $('#name').val().trim();
        if (name.length < 3) {
            $('#name').next('.error-message').text('Имя должно содержать минимум 3 символа');
            isValid = false;
        }
        
        // Валидация телефона (только цифры, длина 10-15 символов)
        const phone = $('#phone').val().trim();
        const phoneRegex = /^[\d\s\(\)\-+]{10,15}$/;
        if (!phoneRegex.test(phone)) {
            $('#phone').next('.error-message').text('Введите корректный номер телефона');
            isValid = false;
        }
        
        // Валидация email (если поле не пустое)
        const email = $('#email').val().trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email !== '' && !emailRegex.test(email)) {
            $('#email').next('.error-message').text('Введите корректный email');
            isValid = false;
        }
        
        // Если все проверки пройдены, форма отправляется
        if (isValid) {
            alert('Форма успешно отправлена!');
            // this.submit(); // Раскомментировать для реальной отправки
        }
    });
});

Как это работает?

✔ e.preventDefault() — отменяет стандартную отправку формы.
✔ .trim() — удаляет лишние пробелы в начале и конце строки.
✔ Регулярные выражения проверяют:

• Телефон: цифры, пробелы, +, -, скобки (длина 10-15 символов).

• Email: стандартный формат user@example.com.
  ✔ Вывод ошибок под каждым полем (<span class="error-message">).

Улучшение UX: динамическая валидация

Чтобы пользователь видел ошибки сразу (а не только при отправке), можно добавить проверку при вводе:

// Валидация имени при вводе
$('#name').on('input', function() {
    const name = $(this).val().trim();
    if (name.length < 3) {
        $(this).next('.error-message').text('Минимум 3 символа');
    } else {
        $(this).next('.error-message').text('');
    }
});

// Валидация телефона при вводе (только цифры)
$('#phone').on('input', function() {
    const phone = $(this).val().trim();
    const phoneRegex = /^[\d\s\(\)\-+]*$/;
    if (!phoneRegex.test(phone)) {
        $(this).next('.error-message').text('Только цифры, +, -, скобки');
    } else {
        $(this).next('.error-message').text('');
    }
});

Вывод

• Базовая валидация формы на jQuery готова.
• Плюсы: простота, минимальные зависимости.
• Минусы: требует доработки для сложных случаев.

Что можно улучшить?

• Добавить маску для телефона (Inputmask).
• Реализовать более сложные проверки (пароли, даты).
• Использовать плагины (jQuery Validation).

Теперь вы знаете, как сделать простую валидацию формы на jQuery!