84

ブートストラップを使用してポップオーバーを簡単に表示できます。また、標準のjQuery検証プラグインまたはjQuery検証エンジンを使用して検証を行うこともできますが、一方を他方にフィー​​ドする方法がわかりません。

必要なのは、通知を表示したいときにバリデーターによって呼び出されるフックであり、メッセージとターゲット要素をポップオーバーに渡すクロージャーを与えることだと思います。これは一種の依存性注入のようです。

理論的にはすべて素晴らしいですが、そのフックがどこにあるのか、またはいずれかの検証エンジンにフックが存在する場合でも、私にはわかりません。どちらも、エラータイプ（必ずしもメッセージテキストは必要ありません）とそれに関連する要素だけが必要な場合に、配置、ラッパー、スタイルに関するあらゆる種類の精巧なオプションを使用して通知を表示する責任を負うことに熱心に取り組んでいるようです。に。個々の通知ではなく、フォーム全体のフックを見つけました。

動的に作成されたフォームとうまく連携するため、クラスを使用してルールを定義する検証システムの方がはるかに好きです。

誰かが解決策やより良いアイデアを持っていますか？

4

16 に答える 16

80

これは実践的な例です。

$('form').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
    }
});

ここに画像の説明を入力してください

ブートストラップポップオーバーは実際には使用しませんが、見た目はとても良く、簡単に実現できます。

アップデート

したがって、ポップオーバーの検証を行うには、次のコードを使用できます。

$("form").validate({
  rules : {
    test : {
      minlength: 3 ,
      required: true
    }
  },
  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({
        trigger: "manual",
        placement: "top",
        content: value.message,
        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
      });
      // Bootstrap 3.x :      
      //_popover.data("bs.popover").options.content = value.message;
      // Bootstrap 2.x :
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});

あなたはこのようなものを手に入れます：

ここに画像の説明を入力してください

jsFiddleをチェックしてください。

于 2011-12-30T00:55:13.847 に答える
21

highlightおよびjQueryValidatorshowErrors オプションを見てください。これらを使用すると、Bootstrapポップオーバーをトリガーする独自のカスタムエラーハイライトをフックできます。

于 2011-12-09T00:13:25.577 に答える
9

Chris Fulstowはそれを正しく理解していましたが、それでもしばらく時間がかかったので、完全なコードを次に示します。

これにより、エラー時のポップオーバーが表示され、デフォルトのエラーラベルが非表示になります。

$('#login').validate({
  highlight: function(element, errClass) {
    $(element).popover('show');
  },
  unhighlight: function(element, errClass) {
    $(element).popover('hide');
  },
  errorPlacement: function(err, element) {
    err.hide();
  }
}).form();

これにより、ポップオーバーが設定されます。これから必要なのはトリガーだけです：'手動'

$('#password').popover({
  placement: 'below',
  offset: 20,
  trigger: 'manual'
});

popoverに渡されたtitle属性とcontent属性が機能していなかったため、＃password入力でdata-content ='Minimum5characters'およびdata-original-title='InvalidPassword'を使用してインラインで指定しました。フォームにはrel='popover'も必要です。

これは機能しますが、選択を解除するとポップオーバーがちらつきます。それを修正する方法はありますか？

于 2012-01-05T06:10:27.177 に答える
6

これは、ポップアップがすでに存在している場合でも、検証の「ちらつき」の問題が常に「表示」しようとするのを防ぐ、VarunSinghからの優れた提案のフォローアップです。エラー状態配列を追加して、エラーが表示されている要素と表示されていない要素をキャプチャしました。チャームのように機能します！

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});
于 2012-12-22T23:26:19.980 に答える
5

jQuery検証プラグイン（バージョン1.9.0でテスト済み）用のこのjQuery拡張機能は、このトリックを実行します。

https://github.com/tonycoco/rails_template/blob/master/files/assets/javascripts/jquery.validate.bootstrap.js

これにより、Rails-eskエラーメッセージも追加されます。

于 2012-04-26T19:46:49.623 に答える
3

ブートストラップのCSSを変更することを好みます。jQueryvalidateのクラスを適切な場所に追加しました。field-validation-errorおよびinput-validation-error

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}
于 2012-01-04T12:43:42.750 に答える
3

これは、Bootstrap2.xとjQueryValidate1.9で行った方法です。 

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight:    function (element, errorClass) {
        $(element).parent().parent().addClass('error');
    }, unhighlight: function (element, errorClass) {
        $(element).parent().parent().removeClass('error');
    }});
于 2012-04-04T18:44:48.790 に答える
3


以下をご覧ください。 - https： //gist.github.com/3030983
これが最も簡単だと思います。

編集

リンクからのコード：

$('form').validate({
    rules: {
        numero: {
            required: true
        },
        descricao: {
            minlength: 3,
            email: true,
            required: true
        }
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('popover').options.content = value.message;

            $(value.element).popover('show');

        });

    }

});
于 2012-09-22T21:21:34.280 に答える
3

頭を上げてくれてありがとう！これが私のバージョンのBootstrapですが、ツールチップが付いています。私の意見では、ポップオーバーよりもエレガントです。質問はポップオーバーに関するものだったと思いますので、この理由で投票しないでください。多分誰かがこのようにそれを好きになるでしょう。何かを探しているときに大好きで、Stackoverflowで新しいアイデアを見つけました。注：フォームのマークアップは必要ありません。

    $('#LoginForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },

            email_address: {
                required: true,
                email: true
            }
        },
        messages: {
            password: {
                required: "Password is required",
                minlength: "Minimum length is 6 characters"
            },
            email_address: {
                required: "Email address is required",
                email: "Email address is not valid"
            }
        },  
        submitHandler: function(form) {
            form.submit();
        },

        showErrors: function (errorMap, errorList) {

            $.each(this.successList, function (index, value) {
                $('#'+value.id+'').tooltip('destroy');
            });


            $.each(errorList, function (index, value) {

                $('#'+value.element.id+'').attr('title',value.message).tooltip({
                    placement: 'bottom',
                    trigger: 'manual',
                    delay: { show: 500, hide: 5000 }
                }).tooltip('show');

            });

        }

    });
于 2013-02-27T03:03:04.950 に答える
2

これが私がそれを実現させた方法です。ただし、検証スクリプトに2つの変更を加える必要があります（ここでブートストラップ1.4のコードを取得し、それを変更しました-http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin- for-twitter-bootstrap /）

検証するための私の呼び出し：

    $("#loginForm").validate({
  errorClass: "control-group error",
  validClass: "control-group success",
  errorElement: "span", // class='help-inline'
  highlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    } else {
        $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    } else {
        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    }
  }
});

次に、jquery.validate.jsの2つの変更を行う必要があります。1
。この修正を適用します-https ：//github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. 647行目（showLabel関数でラベル部分を作成） ）行の.addClass(this.settings.errorClass)追加後：.addClass("help-inline")
誰かがvalidate関数で2番目の修正を適用する方法を見つけることができるかもしれませんが、showLabelが強調表示の後に呼び出されるため、私は方法を見つけられませんでした。

于 2012-02-07T14:32:06.403 に答える
2

これは、TwitterBootstrapガイドラインに準拠するために検証に入れたものです。エラー検証メッセージはに入れられ<span class=help-inline>、外部コンテナをerrorまたはとして強調表示しsuccessます。

errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}
于 2012-03-15T11:06:35.243 に答える
2

上記のKennyMeyerの優れた回答の更新です。それが私のために働くのを妨げるいくつかの問題がありました、それは私がこのスニペットで対処しました：

showErrors: function (errorMap, errorList) {
        $.each(this.successList, function (index, element) {
            return $(element).popover("destroy");
        });

        $.each(errorList, function (index, error) {
            var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover

            ele.popover({
                    trigger: "manual",
                    placement: "top",
                    content: function(){ //use a function to assign the error message to content
                        return error.message
                    },
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            //bs.popover must be used, not just popover
            ele.data("bs.popover").options.content = error.message;

            return $(error.element).popover("show");
        });
    }
于 2016-08-01T19:36:16.917 に答える
1

元のポスターがブートストラップポップオーバーを表示/非表示にするフックを要求したため、これがディスカッションに関連するかどうかはわかりません。

私は簡単な検証を探していましたが、ポップオーバーは問題ではありませんでした。関連する投稿とグーグル検索結果の最初のものは、すでにこの質問の重複としてマークされています。したがって、この優れた@ReactiveRavenのjqValidation JS（適切にはjqBootstrapValidationと呼ばれます）は、TwitterBootstrapとうまく調和していることに言及するのは理にかなっています。セットアップには数分しかかかりません。ここからダウンロードしてください。

これが付加価値をもたらすことを願っています。

于 2013-02-27T03:55:41.770 に答える
1

tl; drは、ハッシュマップを使用して要素のIDを格納し、オンザフライでポップオーバーを作成することで、明示的なポップオーバーを列挙する必要をなくします（マッシュアップのJeffreyGilbertとKennyMeyerのアプローチ）。

これが私の見解です。これは、他の人が言及したちらつきの問題を修正しますが、@ Jeffrey Gilbertの回答とは異なり、リスト（errorStates）を使用せず、エラーマップを使用します。ハッシュマップFTW。CSのすべての問題はハッシュマップで解決できることをどこかで読んだことを覚えていると思います:)

var err_map = new Object();     // <--- n.b.
$("form#set_draws").validate({
  rules: {
    myinput: { required: true, number: true },
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      if (value.id in err_map)
      {
        var k = err_map[value.id];
        delete err_map[value.id]; // so validation can transition between valid/invalid states
        k.popover("hide");
      }
    });
    return $.each(errorList, function(index, value) {
      var element = $(value.element);
      if( ! (value.element.id in err_map) ) {
        var _popover = element.popover({
          trigger: "manual",
                 placement: "top",
                 content: value.message,
                 template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
        });
        _popover.data("popover").options.content = value.message;
          err_map[value.element.id] = _popover;
        return err_map[value.element.id].popover("show");
      }
    });
  }
});

これについてアイデアを投稿してくれた他のすべての人に感謝します。

于 2013-06-12T03:54:21.187 に答える
1

これをチェックアウトしてください：https ：//github.com/mingliangfeng/jquery.validate.bootstrap.popover

JSの代わりにBootstrappopovercssを使用する方法を示しています。JSメソッドのポップアップは点滅の問題を引き起こします。

于 2013-08-11T13:14:55.340 に答える
0

ポップアップに上記のKennyMeyerコードを使用する場合、フィールドのコンテンツをチェックするが、有効なURLなどの必須ではないルールにより、フィールドをクリアしてもポップアップが消えないことに注意してください。解決策については、以下のonkeyupを参照してください。誰かがより良い解決策を持っているなら、投稿してください。

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }
于 2013-07-14T16:41:16.993 に答える