1

私は真新しい MVC3 サイトを作成しています。web.config で有効になっているクライアント側の検証

<appSettings>
   <add key="ClientValidationEnabled" value="true"/> 
   <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

シナリオ #1: (クライアント側の) 検証が失敗した後に生成された出力 HTML:

<span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-error">
    <span htmlfor="UserName" generated="true" class="">Please enter an email address</span>
</span>

最も内側のタグに class="" が含まれるネストされた span タグに注意してください。

シナリオ #2: カスタムのサーバー側検証。同じ web.config 構成を使用して、カスタム ビジネス ルールを確認するための検証をサーバーに追加しました。検証が失敗したため、ModelState にエラーを追加します。

生成された HTML は次のようになります。

<span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-error">Please enter a valid email address</span>

ネストされたタグではなく、span タグが 1 つだけ生成されたことに注意してください。

生成された HTML には 2 つの異なる最終結果があるため、.field-validation-error クラスのスタイルを設定することはできません。

要約: クライアント側の検証では 1 つのスパン タグのみが生成され、サーバー側の検証では 2 つのスパン タグが生成されます。

質問: これはフレームワークのインデントされた動作ですか、それとも何か間違っていますか?

4

2 に答える 2

2

これはフレームワークのインデントされた動作ですか、それとも何か間違っていますか?

あなたは何も悪いことをしていません。それはjquery.validate.unobtrusive.jsスクリプトがどのように機能するかです。したがって、これを欠落している機能、矛盾、PITAなどと呼ぶかもしれませんが、それが彼らが箱から出してそれを行った方法です.

これは、jquery 検証プラグインは拡張可能であり、好きなように微調整できると言われています。

$.validator.setDefaults({
    // customize the way errors are shown
    showErrors: function (errorMap, errorList) {
        if (errorList.length < 1) {
            // because we have customized the way errors are shown
            // we need to clean them up if there aren't any
            $('.field-validation-error', this.currentForm).hide().attr('class', 'field-validation-valid');
            $('.input-validation-error', this.currentForm).removeClass('input-validation-error');
            return;
        }
        $.each(errorList, function (index, error) {
            // simply toggle the necessary classes to the corresponding span
            // to make client validation generate the same markup as server
            // side validation
            var element = $(error.element);
            element.attr('class', 'input-validation-error');
            element.next('span').show().text(error.message).attr('class', 'field-validation-error');
        })
    }
});
于 2011-02-12T19:56:25.853 に答える
0

サーバーの検証が失敗した後に検証メッセージにネストされたスパンを常に使用したい場合 (スタイリング上の理由から)、次のことができます。

$(document).ready(function(){
    $('.field-validation-error').each(function(){
        $(this).html($('<span>').text($(this).text()));
    });
});
于 2013-12-03T21:29:11.540 に答える