3

ASP.net MVC クライアント側の検証エラー メッセージをqTipsの形式で表示しようとしています。ここでの方法と同様にonError関数を変更します。jquery.validation.unobstrusive.js

function onError(error, inputElement) {  // 'this' is the form element        
    var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
    replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

    // Remove the following line so the default validation messages are not displayed        
    // container.removeClass("field-validation-valid").addClass("field-validation-error");

    error.data("unobtrusiveContainer", container);

    if (replace) {
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
    }
    else {
        error.hide();
    }

    /**** Added code to display the error message in a qTip tooltip ****/        
    // Set positioning based on the elements position in the form
    var elem = $(inputElement),
        corners = ['left center', 'right center'],
        flipIt = elem.parents('span.right').length > 0;

    // Check we have a valid error message
    if (!error.is(':empty')) {
        // Apply the tooltip only if it isn't valid
        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' // Make it red... the classic error colour!
            }
        })

        // If we have a tooltip on this element already, just update its content
        .qtip('option', 'content.text', error);
    }

    // If the error is empty, remove the qTip
    else { elem.qtip('destroy'); }
}

私のモデル:

public class Model
{
    [DataType(DataType.Currency)]
    [Range(typeof(decimal), "0", "79228162514264337593543950335")]
    public decimal Amount { get; set; }
    // bunch of other properties
}

すべてが正常に機能し、エラー (たとえば、金額フィールドが必要です) が qTips に表示されます。ただし、入力を有効な値に変更しても、qTip は消えません。正確な手順は次のとおりです。

  1. Amountフィールドに無効な値を入力してください
  2. 入力フォーカスが失われたときに、正しいエラー メッセージとともに qTip が表示される
  3. 有効な値で入力を更新します
  4. qTipが閉じませんでした

Chrome Developers Tool から、問題を次のコード行に特定しました: if (!error.is(':empty'). この条件は、有効な入力が提供された場合でも true を返します。

error変数:

[<span for=​"Amount" class>​&lt;/span>​]

spanが空なのに、なぜ上記の条件が true を返すのだろうか? 入力が有効になったときにqTipを自動的に閉じるようにします。

4

2 に答える 2

0

目立たないコードは正しく見えます。以前に QTip でこれを使用したことがあり、正常に動作しました。

満たされていない検証ルールがまだあるようです。ブラウザの開発ツールでコードを調べて、そのフィールドにどのような検証属性が存在するかを確認する価値があります。

また、開発ツール コンソールをチェックして、クライアント側のエラーがないことを確認します。

于 2013-02-25T10:44:05.560 に答える
0

これはqTip2 のバグであることが判明しました。ビルドを更新しましたが、すべて正常に動作します。

于 2013-02-27T08:27:07.303 に答える