web-dev-qa-db-ja.com

MVC 4クライアント側の検証が機能しない

MVC 4アプリケーションでクライアント側の検証が機能しない理由を教えてください。

_layout.schtml

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

私のweb.configには次のものがあります：

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

私のlogin.cshtmlページには：

@using (Html.BeginForm())
{
    <div class="formscontent">

        <ol>
            <li>
                @Html.LabelFor(x => x.AgreementNumber)
                <br />
                @Html.TextBoxFor(x => x.AgreementNumber, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.AgreementNumber)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.UserName)
                <br />
                @Html.TextBoxFor(x => x.UserName, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.UserName)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.Password)
                <br />
                @Html.PasswordFor(x => x.Password, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.Password)
                <br />
                <br />
            </li>
        </ol>

    </div>

    <ol>
        <li>
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
        </li>
    </ol>

    <br />

    <input class="mainbutton" type="submit" value="@Model.Localisation.TranslateHtmlString("LogonBtn")" /><br />
    <div style="text-align: left; padding: 0 5px 5px 10px;">
        Forgot login-info? clik <a class="link" href="@Url.Action("Index", "Credentials")">here.</a>
    </div>

}

ログインページの下部：

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
}

ブラウザでJavaScriptが有効になっています。 Visual StudioのMVC 4テンプレートプロジェクトでは、クライアント検証は正常に機能します。

ページソースを表示しているログインページでアプリケーションを実行すると、次のように表示されます。

<label for="AgreementNumber">number</label>
<br />
<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />
<br />
<span class="field-validation-valid" data-valmsg-for="AgreementNumber" data-valmsg-  replace="true"></span>

そして、この下の：

<script src="/BMWebsite/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.inline.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.unobtrusive.js"></script>

私のモデルのプロパティには注釈が付けられています：

public class LogonModel : ModelBase
{
    [MyRequired("AgreementNumberRequiredProperty")]
    [MyDisplay("AgreementNumberLabel")]
    public string AgreementNumber { get; set; }

    [MyRequired("UserNameRequiredProperty")]
    [MyDisplay("UserNameLabel")]
    public string UserName { get; set; }

    [MyRequired("PasswordRequiredProperty")]
    [DataType(DataType.Password)]
    [MyDisplay("PasswordLabel")]
    public string Password { get; set; }

    [MyDisplay("RememberMeCheckBox")]
    public bool RememberMe { get; set; }
}

MyRequiredは、通常のRequiredAttributeから派生したクラスです。理由は、RequiredAttributeクラスのFormatErrorMessage(string name)メソッドをオーバーライドすることにより、エラーメッセージがローカライズされるためです。そしてそれはうまく機能します-私のラベルとエラーメッセージはローカライズされています。

MyRequired.cs

public class MyRequiredAttribute : RequiredAttribute
{
    private readonly string _errorMessagekey;

    public MyRequiredAttribute(string errorMessage)
    {
        _errorMessagekey = errorMessage;
    }

    public override string FormatErrorMessage(string name)
    {
        var translation = HttpContext.Current.Session["translation"] as LocalisationHelper;

        return translation != null ? translation.Translate(_errorMessagekey) : ErrorMessage;
    }
}

ログインアクションメソッドのPOSTバージョンにブレークポイントを設定すると、ヒットします。フォームはサーバーに投稿され、サーバー側の検証が行われます。クライアント側の検証は行われません。

私は何が欠けていますか？

ありがとうございました。

jqueryasp.net-mvc-4jquery-validateunobtrusive-validation
53
Javid

同じ問題がありました。控えめな検証スクリプトがロードされていないようです（最後のスクリーンショットを参照）。 _Layout.cshtmlの最後に追加して修正しました

 @Scripts.Render("~/bundles/jqueryval")

最終結果：

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/jqueryval")
   @RenderSection("scripts", required: false)

私の非常に標準的なCRUDビューを除き、すべてがVisual Studioプロジェクトテンプレートのデフォルトです。

問題を修正した後に読み込まれたスクリプト： enter image description here

46
Liviu M.

検証をアクティブにするすべてのビューの最後に、このコマンドを必ず追加してください。

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
15
Lara85

Global.asax.csで、Application_Start（）メソッドを追加します。

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MyRequiredAttribute), typeof(RequiredAttributeAdapter));
10
saniokazzz

あなたはすでにこれを解決しているかもしれませんが、App_Startを使用してBundleConfigのjqueryvalアイテムの順序を変更することにより、いくつかの運がありました。クライアント側の検証は、新しく追加されたMVC 4インターネットソリューションでも機能しません。そこで、デフォルトを変更しました。

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

に

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*",
                    "~/Scripts/jquery.unobtrusive*"));

そして今、私のクライアント側の検証が機能しています。邪魔にならないファイルが最後にあることを確認したいだけです（したがって、邪魔にならないように、ハァッ:)

9
firecape

最終的に、必要なスクリプトを.cshtmlファイルに次の順序で直接含めることで、この問題を解決しました。

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

少し話題から外れていますが、私はWebプログラミングでこの種のことが頻繁に発生することに常に驚いています。薄っぺら、薄っぺら、薄っぺら。

9
user1172763

クライアント側での検証にjquery.validate.jsおよびjquery.validate.unobtrusive.jsを使用する場合、リクエストでDOM要素の検証属性を登録する必要があることを忘れないでください。そのため、このコードを使用できます。

$.validator.unobtrusive.parse('your main element on layout');

すべての検証属性を登録します。 （たとえば）でこのメソッドを呼び出すと、$(document).ajaxSuccess() or $(document).ready()をすべて登録して、cshtmlファイルにすべてのjsファイルを登録する代わりに、検証を正常に実行できます。

7
Saeed Rajaei

入力にはデータ検証属性はありません。 Html.TextBoxForなどのサーバー側ヘルパーを使用して生成し、フォーム内にあることを確認してください。

@using (Html.BeginForm())
{
    ...
    @Html.TextBoxFor(x => x.AgreementNumber)
}

また、jquery.validate.inline.jsスクリプトが何であるかわかりませんが、それが何らかの形でjquery.validate.jsプラグインに依存する場合は、その後で参照されることを確認してください。

すべての場合において、潜在的なエラーまたは欠落したスクリプトについては、ブラウザーでjavascriptコンソールを確認してください。

7
Darin Dimitrov

検証に問題があり、フォームが投稿して検証すると、

これはjquery cdnでは機能しません

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

これはjquery cdnがなくても動作します

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

希望は誰かを助ける。

4
stom

入力用にレンダリングされたhtmlに検証data- *属性が表示されないのは、フォームコンテキストがないためです。 @using(Html.BeginForm(...)) { ... }を使用してフォームを作成すると、FormContextが自動的に作成されます。

フォームに通常のhtmlタグを使用する場合、クライアント側の検証は行われません。

3
Bennor McCarthy

私にとって、これは多くの検索でした。最終的には、自分でファイルをダウンロードする代わりに、NuGetを使用することにしました。関係するすべてのスクリプトとスクリプトバンドルを削除し、次のパッケージを入手しました（現在の最新バージョン）

  • jQuery（3.1.1）
  • jQuery検証（1.15.1）
  • Microsoft jQuery Ubobtrusive Ajax（3.2.3）
  • Microsoft jQueryの控えめな検証（3.2.3）

次に、これらのバンドルをBundleConfigファイルに追加しました。

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/jquery.unobtrusive-ajax.js"));

この参照を_Layout.cshtmlに追加しました。

@Scripts.Render("~/bundles/jquery")

そして、検証が必要なビューにこの参照を追加しました。

@Scripts.Render("~/bundles/jqueryval")

今ではすべてが機能しました。

これらのことを忘れないでください（多くの人が忘れています）：

  • フォームタグ（@using（Html.BeginForm（）））
  • 検証の概要（@ Html.ValidationSummary（））
  • 入力の検証メッセージ（例：@ Html.ValidationMessageFor（model => model.StartDate））
  • 設定 （）
  • バンドルに追加されたファイルの順序（上記のとおり）
3
Jon Koeter
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

このコードはうまくいきました。

2
Sam

私の場合、検証自体は機能していました（要素を検証して正しいブール値を取得できました）が、視覚的な出力はありませんでした。

私のせいは、この行を忘れた@ Html.ValidationMessageFor（m => ...）

TSのコードにはこれが含まれており、私は正しい道を歩みましたが、他の人の参考としてここに入れました。

2
Maarten Kieft

以下の行は、AgreementNumberで必須のようなDataAttributeを設定していないことを示しています

<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />

あなたが必要

[Required]
public String AgreementNumber{get;set;}
1
Dr Blowhard

私が追加した場合、idはhtmlのVSに対して自動的に生成された名前に等しく、コードではそのケースに行を追加しました。

$(function () {
            $.validator.addMethod('latinos', function (value, element) {
                return this.optional(element) || /^[a-záéóóúàèìòùäëïöüñ\s]+$/i.test(value);
            });

            $("#btn").on("click", function () {
                //alert("aa");
                $("#formulario").validate({                    
                    rules:
                    {
                        email: { required: true, email: true, minlength: 8, maxlength: 80 },
                        digitos: { required: true, digits: true, minlength: 2, maxlength: 100 },
                        nombres: { required: true, latinos: true, minlength: 3, maxlength: 50 },
                        NombresUsuario: { required: true, latinos: true, minlength: 3, maxlength: 50 }
                    },
                    messages:
                    {
                        email: {
                            required: 'El campo es requerido', email: 'El formato de email es incorrecto',
                            minlength: 'El mínimo permitido es 8 caracteres', maxlength: 'El máximo permitido son 80 caracteres'
                        },
                        digitos: {
                            required: 'El campo es requerido', digits: 'Sólo se aceptan dígitos',
                            minlength: 'El mínimo permitido es 2 caracteres', maxlength: 'El máximo permitido son 10 caracteres'
                        },
                        nombres: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        },
                        NombresUsuario: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        }
                    }
                });
            });

<tr>@*<div class="form-group">     htmlAttributes: new { @class = "control-label col-md-2" }      , @class = "form-control" }*@
                <td>@Html.LabelFor(model => model.NombresUsuario )</td>

                        @*<div class="col-md-10">*@
                <td>
                    @Html.EditorFor(model => model.NombresUsuario, new { htmlAttributes = new { id = "NombresUsuario" } })
                    @Html.ValidationMessageFor(model => model.NombresUsuario, "", new { @class = "text-danger" })
                </td>
0
Jhon Hernández

このHTML <form action="/StudentInfo/Edit/2" method="post" novalidate="novalidate">を作成し、novalidate="novalidate"がクライアント側のjQueryの実行を妨げていました。novalidate="novalidate"を削除すると、クライアント側のjQueryが有効になり、動作を開始しました。

0
Sachin

System.ComponentModel.DataAnnotations名前空間の下にあるAttributes（たとえばRequiredAttribute）を使用していることを確認してください

0
Reyan Chougle

つかいます：

@ Html.EditorFor

の代わりに：

@ Html.TextBoxFor

0
Mohammad J Uddin Murad

この投稿に追加したいのは、PartialViewで同じ問題が発生したことです。

そして私は追加する必要がありました

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

_Layoutビューに既に存在する場合でも、部分ビューに。

参照：

0
Hugo

私の問題はweb.configにありました：UnobtrusiveJavaScriptEnabledがオフになりました

<appSettings>

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

<add key="UnobtrusiveJavaScriptEnabled" value="false" />

</appSettings>

私はに変更し、現在動作します：

`<add key="UnobtrusiveJavaScriptEnabled" value="true" />`
0
ransems