1

Webデザインに剣道UIを使用していますが、現時点では検証ツールチップの配置に固執しています。ドロップダウンの場合は、入力の下の表示したい場所に正確に表示されますが、プレーンテキスト入力の場合は、検証ツールチップが入力要素の横に表示されます。これは私のページに一貫性のない外観を与えています。剣道のドキュメントでツールチップを検索しましたが、思ったほど詳細ではなく、あまり役に立ちません。

適用される要素タイプに関係なく、検証ツールチップが検証対象のフィールドの下に表示されることを確認するにはどうすればよいですか？

詳細については、スクリーンショットを参照してください。

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

前もって感謝します。

4

3 に答える 3

1

それは本当にあなたのページのマークアップとスタイルに依存します。入力フィールドに追加display: blockすると問題が解決する場合があります。sを使用している場合は、検証メッセージにと必要なものをfloat追加します。clear:leftmargin

于 2012-06-04T11:22:19.723 に答える
1

これに対して私が見つけた最善の解決策は、次の例のように、CSS .k-tooltip-validationをオーバーライドして、必要な場所に配置することです。

.k-tooltip-validation {
        margin-top: -40px !important; 
}

それが役に立てば幸い！:)

于 2014-02-19T14:05:48.747 に答える
0

あなたはこのようなことを試すことができます。

検証イベントにコールバックハンドラーを追加できたので、多くの問題が発生しましたが、投稿のぼかしイベントでは呼び出されず、リアルタイムで要約を上部に表示するためにインラインにしたかったのです。

最初にvalidateOnBlurを無効にして、デフォルトのものがポップアップしないようにします。

 var validatable = $("form").kendoValidator( { 
    validateOnBlur:false,
    ...
    });

次に、独自の検証コールバックを追加できます。

私が述べたように、これはぼかしでは呼び出されません。

        validateOnBlur:false,
        validate: function (e) {
          ....
        },

フィールドが青で更新されるように、ぼかしで検証を呼び出します。

これを無効にしたので、フォームの投稿とぼかしの両方で呼び出されるようにします。

    $("#input, textarea").on("blur", function (validator) {
        validator.validatable.validate();
    }.bind(null,this));

      // valid on submit where you like
    submit: function () {
        if (this.validatable.validate()) {
            $("#form1").submit();
        }
    },

要約は簡単です。私はそれらを私のページの上部にあるクラスエラーセクションのあるコントロールに配置しました

エラーをコピーして、ページの別の場所に要約で配置します。また、jqueryを使用して、ラベルの前に小さな星を付けています。next（）は、エラーテキストがあるスパンであることに注意してください。

        validate: function (e) {
            $(".k-invalid").next().each(function () {
                $(".errors-section").append($(this).text()).show();
                $(this).text("");
            });
        },

それは私のために働いた。

于 2014-05-10T23:30:39.150 に答える