销毁其他工具提示中显示的qtips,验证后提交表单

时间:2013-05-31 20:14:18

标签: jquery forms validation qtip destroy

我第一次向你求助,因为我不知道如何解决我的问题。我制作了一个以qtip显示的表格。此表单具有jQuery验证 - 在出现验证错误时具有自己的qtips。

$(document).ready(function() {

var qtipForm = $('#RegisterAccount').clone();
qtipForm.attr('name', 'RegisterForm');

$('#addinstallerloginform').qtip({
    content: {
        text: qtipForm,
        title: {
            text: 'Zakładanie konta',
            button: true
        }
    },
    hide: false,
    show: {
        event: 'click'
    },
    position: {
        my: 'left top',
        at: 'right top'
    },
    events: {
        render: function (event, api) {
            $('form', this).submit(function (e) {
                $.ajax({
                    type: 'post',
                    data: {
                        "id": 2
                    },
                    dataType: 'json',
                    url: 'index.php?controller=Replacement&action=addloginform',
                    success: function (data) {
                        if (data.state == 'new') {
                            $('#addinstallerloginform').after(sendMail(data.login, data.password));
                        }
                        if (data.state == 'has') {
                            alert('Instalator ma już wygenerowane dane do logowania. Jego login to: ' + data.login);
                        }
                    }
                });

                e.preventDefault();
            });
        },
        show: function (event, api) {
            var myForm = $('form[name=RegisterForm]');
            myForm.validate({
                onsubmit: true,
                onkeyup: false,
                errorClass: 'error',
                validClass: 'valid',
                rules: {
                    email: {
                        required: true,
                        email: true
                    }
                },
                errorPlacement: function (error, element) {
                    console.log(error);
                    var elem = $(element),
                        corners = ['right center', 'left center'],
                        flipIt = elem.parents('span.right').length > 0;
                    if (!error.is(':empty')) {
                        elem.filter(':not(.valid)').qtip({
                            overwrite: false,
                            content: error,
                            position: {
                                my: corners[flipIt ? 0 : 1],
                                at: corners[flipIt ? 1 : 0],
                                viewport: $(window)
                            },
                            show: {
                                event: false,
                                ready: true
                            },
                            hide: false,
                            style: {
                                classes: 'qtip-red qtip-higher-zindex'
                            }
                        })
                            .qtip('option', 'content.text', error);
                    } else {
                        elem.qtip('destroy');
                    }
                },
                success: $.noop,
            })
        }
    }
});});

http://jsfiddle.net/qmqqa/ - 这是它的工作原理。

  1. 如何在关闭包含主窗体的主qtip后销毁错误验证qtips。
  2. 如何在没有验证错误的情况下发布'index.php?controller = Replacement& action = addloginform' - 现在每次都执行
  3. 感谢您的帮助

1 个答案:

答案 0 :(得分:0)

1。在关闭主qTip时销毁错误验证,您可以使用此内部事件对象

    hide: function(event, api) {
      $('.qtip-red').qtip('hide');
    },