📘 Урок 10: jQuery и формы — чтение и установка значений, валидация, работа с checkbox и radio

Цель: научиться эффективно работать с формами в jQuery: получать и устанавливать значения полей, валидировать данные, обрабатывать checkbox и radio кнопки.

---

🔹 Работа с полями формы

Чтение значения

• Для текстовых полей, textarea, select используется метод .val()

let val = $('#inputName').val();
console.log(val);

Установка значения

$('#inputName').val('Новое значение');

---

🔸 Работа с чекбоксами и radio

Получить состояние checkbox

let isChecked = $('#check1').prop('checked');

Установить состояние checkbox

$('#check1').prop('checked', true);

Получить выбранный radio

let selected = $('input[name="gender"]:checked').val();

---

🔸 Валидация форм

Простая проверка на пустоту

$('#form').submit(function(e) {
  if ($('#inputName').val().trim() === '') {
    e.preventDefault();
    alert('Введите имя');
  }
});

Проверка email с помощью регулярного выражения

function validateEmail(email) {
  let re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

$('#form').submit(function(e) {
  let email = $('#email').val();
  if (!validateEmail(email)) {
    e.preventDefault();
    alert('Введите корректный email');
  }
});

---

🔸 Чтение всех значений формы

$('#form').serializeArray().forEach(function(field) {
  console.log(field.name + ': ' + field.value);
});

---

🔸 Работа с select и multiple

Получить выбранное значение

let val = $('#select').val();

Получить все выбранные значения (multiple)

let vals = $('#selectMultiple').val(); // массив

---

🔸 События на изменение

$('#inputName').change(function() {
  console.log('Новое значение: ' + $(this).val());
});

---

🔸 Пример: динамическая валидация email

$('#email').on('input', function() {
  if (validateEmail($(this).val())) {
    $(this).css('border-color', 'green');
  } else {
    $(this).css('border-color', 'red');
  }
});

---

🔸 Пример: работа с чекбоксами

<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Подписаться на новости</label>

<script>
  $('#subscribe').change(function() {
    if ($(this).prop('checked')) {
      alert('Спасибо за подписку!');
    } else {
      alert('Вы отписались');
    }
  });
</script>

---

🔸 Пример: переключение radio

<input type="radio" name="color" value="red" id="red"><label for="red">Красный</label>
<input type="radio" name="color" value="blue" id="blue"><label for="blue">Синий</label>

<script>
  $('input[name="color"]').change(function() {
    alert('Вы выбрали цвет: ' + $(this).val());
  });
</script>

---

📋 Практические задания

1. Сделай форму с именем и email, валидация по нажатию кнопки.

2. Добавь чекбокс «Согласен с правилами», при незаполненном не отправлять форму.

3. Сделай select с несколькими вариантами, выводи выбранные значения.

4. Реализуй динамическую подсветку ошибок при вводе.

5. Добавь radio для выбора пола, при изменении выводи alert с выбранным значением.

---

❗ Частые ошибки

❌ Использование .attr('checked') вместо .prop('checked')

.attr() — для атрибутов, .prop() — для свойств DOM. Для чекбоксов правильнее .prop().

---

❌ Не учитывают trim() при проверке пустоты

" " — не пустая строка, но бессмысленна. Используй trim().

---

❌ Проблемы с multiple select

val() возвращает массив, не строку.

---

📌 Заключение

Формы — важнейшая часть любого сайта, а jQuery делает работу с ними быстрой и удобной. Ты теперь умеешь:

• Получать и изменять значения полей,

• Работать с чекбоксами и радиокнопками,

• Писать простую валидацию,

• Реагировать на изменения в форме.