1

ViewModel のフィールドに配置された属性に対して、MVC4 フィールドのクライアント側、javascript または jQuery 主導の検証を処理するための最良の方法を知りたいです。

ここに例があります

    [Required]
     public string Username { get; set; }

     [Required]
     public string Email { get; set; }

    <div>
        @Html.LabelFor(m=>m.Username)
        @Html.ValidationMessageFor(m => m.Username)
    </div>

    <div>
        @Html.LabelFor(m=>m.Email)
        @Html.ValidationMessageFor(m => m.Email)
    </div>

現在、無効な電子メール アドレスや空の UserName などをフォームに入力して [送信] をクリックすると、エラーが正しく通知されます。期待どおりに動作しています

ユーザーがテキスト ボックスからフォーカスを失い、キーを押すたびに、そのフィールドの検証が行われるようにしたいと思います。

これをすべてのページに追加することで、この問題を修正しました..

<script>
    $("input").blur(function () {
        $(this).valid();
    });
    $("input").keydown(function () {
        $(this).valid();
    });
</script>

ハードコーディングされた jQuery フラグメントを記述することは、最良の選択肢ではありません。おそらくMVC4に埋め込まれているか、この検証を実行するためにjquery.validate.unobtrusiveを構成する方法がある場合は、データ駆動型のアプローチが必要です。

返事を待っています、

ありがとう - Atul

4

1 に答える 1

1

jquery.validate および jquery.validate.unobtrusive スクリプトをページに配置してみてください

<script src="@Url.Content("~/Scripts/jquery-1.6.1.min.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" 
type="text/javascript"></script>

そして電話する

@{Html.EnableClientValidation();}
@{Html.EnableUnobtrusiveJavaScript();}

または web.config の次の設定で設定します。

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

詳細については、こちらを参照してください: ASP.NET MVC 3 での控えめなクライアント検証

編集：

jQuery 検証は、最初のフォーム送信後にその役割を果たします。onfocusout と onkeyup のソース コードを見てください。

onfocusout: function( element, event ) {
            if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
                this.element(element);
            }
        },
onkeyup: function( element, event ) {
            if ( event.which === 9 && this.elementValue(element) === "" ) {
                return;
            } else if ( element.name in this.submitted || element === this.lastElement ) {
                this.element(element);
            }
        },

ぼかしとキーダウンの検証を強制する必要がある場合は、これらの関数の既定の定義をオーバーライドしようとします。バリデータ オブジェクトを使用して実行してみてください (これは検証用のすべてのメタデータであり、ページ サイクルのいつでも検証オプションにアクセスできます)。次のコードはそれを示しています。

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
    $(function () {
        //this function will be called after validation has triggered
        function isValid(element) {
            this.element(element);
        }
        //get current form validator (here could be other selector that corresponds to your form)
        var validator = $('form').data('validator');
        validator.settings.onfocusout = isValid;
        validator.settings.onkeyup = isValid;
    });
</script>
于 2013-06-26T21:38:07.200 に答える