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 に答える