11

こんにちは私はクライアント側の検証でMVC4を使用しています。これは、フィールドの横に検証メッセージを表示するのに最適です。

検証の概要を追加しました：

 @Html.ValidationSummary(false)

これは機能します。クライアント側はすべてです。ただし、動作を変えたいと思います。現在、検証サマリーのメッセージは、送信ボタンがクリックされた場合にのみ変更されます。各フィールドの検証メッセージと同様の方法で動的に入力されるようにしたいと思います。

誰かがこれを達成する方法を提案できますか？

要約の更新をトリガーするものに関する情報は素晴らしいでしょう。

4

3 に答える 3

7

次のことも考慮して、「リアルタイム」で更新する検証サマリーを設定しました。

  1. 要約が表示されたら（ページの検証/送信後）のみ更新します
  2. すべてが有効になったら、要約をクリアします

バリデーターを抽出し、showErrors（）をオーバーライドして、ロジックを実装しましょう。

var validator = $('form').data('validator');
validator.settings.showErrors = function (map, errors) {
    this.defaultShowErrors();
    if ($('div[data-valmsg-summary=true] li:visible').length) {
        this.checkForm();
        if (this.errorList.length)
            $(this.currentForm).triggerHandler("invalid-form", [this]);
        else
            $(this.currentForm).resetSummary();
    }
}

このソリューションをサイト全体で使用しているため、次のinitを作成しました（すでに）：

$('form').each(function () {
    var validator = $(this).data('validator');
    if (validator) {
        validator.settings.showErrors = function (map, errors) {
            this.defaultShowErrors();
            if ($('div[data-valmsg-summary=true] li:visible').length) {
                this.checkForm();
                if (this.errorList.length)
                    $(this.currentForm).triggerHandler("invalid-form", [this]);
                else
                    $(this.currentForm).resetSummary();
            }
        };
    }
});

上記で使用したresetSummaryは次のとおりです。

jQuery.fn.resetSummary = function () {
    var form = this.is('form') ? this : this.closest('form');
    form.find("[data-valmsg-summary=true]")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid")
        .find("ul")
        .empty();
    return this;
};
于 2013-02-28T13:04:31.830 に答える
2

クライアント側の要約は、フォーム全体が検証されたときに生成されるようです。これは、valid（）プラグインメソッドを呼び出すことで自分で行うことができます。jquery検証スクリプトの後にこれを追加します。 

<script>
    $(function () {
        $(':input').on("keyup click", function () {
            $('form').valid();
        });
    });
</script>

私が含めたイベントの例はキーアップとクリックですが、このスペースで区切られたリストに追加したり、リストから削除したりできます。

于 2012-12-11T16:41:41.337 に答える
0

Javascript：

function resetValidationSummary() {
    var form = $('#myForm');

    var validator = form.validate();
    validator.resetForm();

    if (form.valid()) {
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');
    }
}

Css：

.validation-summary-valid {
    display: none;
}
于 2021-09-16T10:21:55.430 に答える