0

正如标题所说，如果不在屏幕上，弹出框将无法正确显示。这似乎是有道理的，但弹出框的箭头仍然出现。我需要弹出框在页面上可见，即使它不在屏幕上。

我正在使用弹出框作为表单上的验证通知。我正在使用插件 jquery validate。

这是发生的事情的图像。问题截图

这是验证的代码：

$(document).ready(function () {
        $("#form1").validate({
            onsubmit: false,
            rules: {
                ctl00$MainContent$txtEventName: { required: true },
                ctl00$MainContent$txtEventDate: { required: true, date: true },
                ctl00$MainContent$txtEventGuests: { required: true, number: true },
                ctl00$MainContent$txtZip: { required: true, number: true, minlength: 5 },
                ctl00$MainContent$txtEmail: { required: true, email: true },
                ctl00$MainContent$txtPwd: { required: true },
                ctl00$MainContent$txtConfirmPwd: { equalTo: "#MainContent_txtPwd" }
            },
            messages: {
                ctl00$MainContent$txtEventName: "Please enter the event name",
                ctl00$MainContent$txtEventDate: "Please enter a date that is not before today",
                ctl00$MainContent$txtEventGuests: "Please enter the amount of guests attending the event",
                ctl00$MainContent$txtZip: "Please enter a valid zipcode",
                ctl00$MainContent$txtEmail: "Please enter a valid email address",
                ctl00$MainContent$txtConfirmPwd: "Your passwords must match"
            },
            showErrors: function (errorMap, errorList) {
                //$.each(this.successList, function(index, value) {
                //    return $(value).popover("hide");
                //});
                return $.each(errorList, function(index, value) {
                    var _popover;
                    _popover = $(value.element).popover({
                        placement: "right",
                        content: value.message,
                        template: "<div class=\"popover\" style='width: 195px;'><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"></div></div></div>"
                    });
                    return $(value.element).popover("show");
                });
            },
            submitHandler: function (form) { // for demo
                return false; // for debug
            }
        });
    });

有人对我能做些什么来解决这个问题有任何想法吗？

4

1 回答 1

0

你的方法有点缺陷。 showErrors用于组成整个表单的错误消息列表；它通常不用于处理发生的每条消息。对于工具提示，您需要在每条消息出现时处理它，而不是一次处理所有消息。

为了显示/隐藏错误提示，您需要使用errorPlacement和success回调函数。

根据需要调整 Bootstrap 弹出框...

$(document).ready(function () {

    $('#myform').validate({
          // rules and options here,
          errorPlacement: function (error, element) {
              // construct tooltip with message as per plugin method
              // show tooltip
          },
          success: function (label, element) {
              // hide tooltip as per plugin method
          }
    });

});

参考： https ://stackoverflow.com/a/14741689/594235

文档：http: //jqueryvalidation.org/validate

或者，这是一个插件，它应该自动将 jQuery Validate 与 Bootstrap Popovers 集成，但是，我自己从未使用过它。

https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

于 2015-04-08T00:16:19.173 回答