验证后的jQuery对话确认

时间:2018-03-12 17:42:03

标签: jquery jquery-ui jquery-validate jquery-ui-dialog

我正在为此项目使用jQuery Validation Plugin,并且有一个jQuery UI对话框来确认提交表单的时间。我希望在成功验证表单后显示对话框,但我不确定该功能需要去哪里。

jQuery(document).ready(function($) {

    function submitForm(response) {
        $('html, body').animate({scrollTop: 0}, 'slow');
        if (response.success == true) {
            $('#response').html('Your application was successfully submitted.').removeClass('hide');
            $('.confirm').attr('disabled', true);
        }
        else {
            $('#response').html(response).removeClass('hide');
            $('.confirm').removeAttr('disabled');
        }
    }
    $.validator.setDefaults({
        submitHandler: function() {
            $.ajax({
                url: 'application.php',
                type: 'POST',
                data: $('#application').serialize(),
                dataType: 'json',
                success: submitForm
            });
            return false;
        },
        showErrors: function(map, list) {
            var focused = document.activeElement;
            if (focused && $(focused).is('input, textarea')) {
                $(this.currentForm).tooltip('close', {
                    currentTarget: focused
                }, true)
            }
            this.currentElements.removeAttr('title').removeClass('ui-state-highlight');
            $.each(list, function(index, error) {
                $(error.element).attr('title', error.message).addClass('ui-state-highlight');
            });
            if (focused && $(focused).is('input, textarea')) {
                $(this.currentForm).tooltip('open', {
                    target: focused
                });
            }
        }
    });
    $('#application').tooltip({
        show: false,
        hide: false
    });
    $('#application').validate({
        rules: {
            name: 'required',
            phone: {
                require_from_group: [1, '.phone'],
                phoneUS: true
            },
            phone_alt: {
                require_from_group: [1, '.phone'],
                phoneUS: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            phone: {
                phoneUS: 'Please enter a valid phone number with area code.'
            },
            phone_alt: {
                phoneUS: 'Please enter a valid phone number with area code.'
            },
            email: 'Please enter a valid email address.'
        }
    });

    $('#application input:not(:submit)').addClass('ui-widget-content');
    $('button, input:submit, input:button').button();

    $('#dialog-confirm').dialog({
        resizable: false,
        height: 'auto',
        modal: true,
        autoOpen: false,
        buttons: {
            'Confirm': function() {
                $(this).dialog('close');
                $('.confirm').click();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $('.confirm').click(function (e,ui) {
        if (!e.isTrigger) {
            e.preventDefault();
            $('#dialog-confirm').dialog('open');
            return false;
        }
    });

});

同样,这是有效的,我只想用户只需要确认一次(在表单验证后)。谢谢!

编辑:现在它正如预期的那样运行以下更改。

submitHandler: function() {
    $('#dialog-confirm').dialog('open');
}

$('#dialog-confirm').dialog({
    resizable: false,
    height: 'auto',
    modal: true,
    autoOpen: false,
    buttons: {
        'Confirm': function() {
            $(this).dialog('close');
            $.ajax({
                url: 'application.php',
                type: 'POST',
                data: $('#exhibitor-form').serialize(),
                dataType: 'json',
                success: submitForm
            });
        },
        'Cancel': function() {
            $(this).dialog('close');
            return false;
        }
    }
});

0 个答案:

没有答案