jQuery Модал, который появляется в форме отправки - PullRequest
Новая
       9

jQuery Модал, который появляется в форме отправки

1 голос
/ 19 марта 2011

У меня есть этот код, который я запускаю, когда пользователь отправляет форму (это позволяет остановить повторную отправку формы или покинуть страницу и сообщить, что форма что-то делает) 

var lastx = 0;

var loadingAnim = setInterval(function () { UpdateSpinner("#loading", 128, 1536); }, 32);

function UpdateSpinner(target, step, width)
{
    $(target).css("background-position", lastx + "px 0px");
    lastx = (lastx - step) % width;
}

var objModal = '<div id="overlay"><div id="loading">loading...</div></div>';

function ShowModal()
{
    jQuery('body').append(objModal);
}

$('form').submit(function() { ShowModal(); });

Теперь все это работает нормально, за исключением того, что когда пользователь пытается отправить форму, которая не была заполнена правильно, я использую плагин jQuery Validation, чтобы показать им сообщения, НО модал все равно будет появляться. Поэтому мой вопрос заключается в том, как показать модальный режим, но только если НЕТ ошибок проверки?

Вот пример моего кода проверки: 

$(function() {
    $("#postform").validate({
        rules: {
            post_title: "required",
            post_url: {
                required: {
                    depends: function() {
                        return $('input[name=post_category]:checked').val() == '14';
                    }
                },
                url: true
            },
            post_code: {
                required: {
                    depends: function() {
                        return $('input[name=post_category]:checked').val() == '13';
                    }
                }
            },
            post_content: "required",
            post_tags: "required"
        },
        messages: {
            post_title: "Your post MUST have a title",
            post_url: "Please enter a valid URL, don't forget the http://",
            post_code: "Please add your code",
            post_content: "Your post MUST have some content",
            post_tags: "Please add some tags"
        }
    });
});

Я думал о том, чтобы использовать что-то вроде этого: 

function HideModal()
{
    jQuery('body').remove(objModal);
}

что может быть запущено при запуске ошибок валидации? Или был бы намного лучший способ сделать это? Спасибо.

1 Ответ

2 голосов
/ 19 марта 2011

numberOfInvalids () должно работать: 

var $validator = {};

$(function() {
    $validator = $("#postform").validate({

        // yada yada validate stuff

    });
});

function ShowModal()
{
    jQuery('body').append(objModal);
}

function HideModal()
{
    jQuery('body').remove(objModal);
}

$('form').submit(function() {
    if ($validator.numberOfInvalids() > 0) {
        HideModal();
    } else {
        ShowModal();
    }
});

Не уверен, что это правильный порядок с Hide / ShowModal (), поэтому вам, возможно, придется их поменять. Кроме того, технически вы не скрываете и не показываете, а добавляете и удаляете.

...