Как настроить модальное окно?

Question

[Валентин Попов]

У меня есть форма, где необходимо заполнить данные. После заполнения данных, кликаем на кнопку отправить и всплывает модальное окно. Проблема в том, что если поля не заполнены и нажать на кнопку отправить, то тоже всплывает модальное окно, а мне необходимо чтобы оно всплывало только после заполнения всех данных.
Вот код :

$(".js-show-modal").on("click", function() {



        $(".js-modal, .js-overlay").fadeIn(500);
        $("body").addClass("open-modal");
    });


    $(".js-overlay, .js-modal-close").on("click", function(e){

        e.preventDefault();
        $(".js-modal, .js-overlay").fadeOut();
        $("body").removeClass("open-modal");

    });

Answer 1

[Валентин Попов]

Решил я сам эту проблему методом проб и ошибок. Всего лишь надо было сделать вот так :

//E-mail Ajax Send
    $("form").submit(function() { //Change
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php", //Change
            data: th.serialize()
        }).done(function() {

            $(".js-modal, .js-overlay").fadeIn(500);
        $("body").addClass("open-modal");

            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
            }, 1000);
        });
        return false;
    });

    /* Modals
    ====================================*/

/*$(".js-show-modal").on("click", function() {

$(".js-modal, .js-overlay").fadeIn(500);
        $("body").addClass("open-modal");

    });*/


    $(".js-overlay, .js-modal-close").on("click", function(e){

        e.preventDefault();
        $(".js-modal, .js-overlay").fadeOut();
        $("body").removeClass("open-modal");

    });

Answer 2

[gleendo]

При нажатии на кнопку, пройтись по всем полям, проверить длину значения. Если у всех длина больше 0, то вывести модальное окно.
Самое банальное, что можно сделать.

Comments

[Валентин Попов]

Как это кодом реализовать?

[gleendo]

elarkov: Откуда я знаю как у вас там все устроено. Рабочий пример выложите куда нибудь в песочницу. Хотя бы на jsfiddle.

Answer 3

[Ankhena]

Почему бы не использовать стандартные методы html?
https://webref.ru/css/required

Comments

[Валентин Попов]

Я их использую, вот и когда нажимаю на кнопку, то и модальное окно всплывает и показывает что необходимо заполнить поля

[Ankhena]

elarkov: Так. Ну и проверяйте по ним перед показом модалки.

[Валентин Попов]

Ankhena W: я не понимаю как проверять (

[Ankhena]

elarkov: первый результат поиска в гугле по запросу "проверка заполнения формы javascript" дает ссылку: ruseller.com/lessons.php?id=592&rub=28 - все вполне хорошо описано.
Можно изменить javascript на jquery в запросе.