Как проверить форму в jquery?

Question

[Sirius 077]

Есть форма https://codepen.io/Sirius1505/pen/XWJKYMM когда нажимаешь на кнопку 'отправить заявку' всплывает окно. Но проблема в том что даже если я не заполнил форму вылезает то окно, нужно сделать так чтобы когда форма не заполнена это окно не появлялось (Извиняюсь если непонятно обяснил).

Answer 1

[Сергей c0re]

В функцию обработки клика по кнопке

$('.popup-button').on('click', function () {
    $('.popup-thanks').fadeIn(),
      $('.popup-callback').fadeOut();
  });

вставить проверку обязательных полей формы.
и выполнять блок

$('.popup-thanks').fadeIn(),
      $('.popup-callback').fadeOut();

только если заполнены обязательные поля.

UPD:
как-то так:

$('.popup-button').on('click', function () {
    if (
        // проверка заполнения имени
        $(".popup-input-name").val().length > 1 &&
        // проверка корректного заполнения телефона
        /^\+?7[ -]?\(?\d{3}\)?[ -]?\d{3}[ -]?\d{2}[ -]?\d{2}$/.test( $(".popup-input-phone").val() ) &&
        // проверка корректного заполнения e-mail
        /^[a-z0-9\-\.]+@[a-z0-9\-\.]+\.[a-z]+$/i.test( $(".popup-input-mail").val() )
       ) {
        $('.popup-thanks').fadeIn(),
        $('.popup-callback').fadeOut();
    } else {
        alert ("Просьба корректно заполнить поля формы");
    }
  });

PS: Вместо алерта можно вставить отображение модального окна с соответствующим текстом.

Comments

[Sirius 077]

а как это сделать?

[Сергей c0re]

Sirius 077, серьезно? доки читали?

см.

• .val() , Работа с атрибутом value
  
• Длина строки
  
• Условные операторы
  

[Сергей c0re]

Sirius 077, получилось?

[Sirius 077]

Сергей, Частично(форму проверяет но не проверяет форму всплывающего окна).

[Сергей c0re]

Sirius 077, это как??
смотри ответ, обновил.

[Sirius 077]

О спасибо заработало)
PS:Сорян что занял у тебя много времени.