65

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 から派生したクラスです。その理由は、クラスのFormatErrorMessage(string name)メソッドをオーバーライドすることでエラー メッセージがローカライズされるためです。RequiredAttribute正常に動作します - ラベルとエラー メッセージはローカライズされています。

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 バージョンにブレークポイントを設定しましたが、ヒットしています。フォームは、サーバー側の検証が行われるサーバーに投稿されます。クライアント側の検証は行われません。

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

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

4

21 に答える 21

51

私も同じ問題を抱えていました。目立たない検証スクリプトが読み込まれていないようです (最後のスクリーンショットを参照)。_Layout.cshtml の最後に追加して修正しました

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

最終結果:

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

私の非常に標準的な CRUD ビューを除いて、すべてが Visual Studio プロジェクト テンプレートの既定値です。

問題を修正した後に読み込まれたスクリプト: ここに画像の説明を入力

于 2013-07-01T07:18:27.737 に答える
15

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

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
于 2016-01-28T09:39:23.247 に答える
12

最終的に、必要なスクリプトを .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 プログラミングでこの種のことが頻繁に起こることに、私はいつも驚かされます。薄っぺら、薄っぺら、薄っぺら。

于 2015-08-27T17:06:14.013 に答える
9

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

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MyRequiredAttribute), typeof(RequiredAttributeAdapter));
于 2013-11-24T18:28:01.897 に答える
9

あなたはすでにこれを解決しているかもしれませんが、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*"));

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

于 2013-07-13T07:24:24.790 に答える
7

jquery.validate.jsクライアント側で検証するために and を使用する場合はjquery.validate.unobtrusive.js、リクエストで任意の DOM 要素の検証属性を登録する必要があることに注意してください。そのため、次のコードを使用できます。

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

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

于 2015-09-20T07:26:46.093 に答える
7

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

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

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

いずれの場合も、ブラウザで JavaScript コンソールを調べて、潜在的なエラーや不足しているスクリプトがないか確認してください。

于 2013-01-25T10:56:55.063 に答える
4

検証に問題があり、フォームが投稿されてから検証されました。

これは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>

希望は誰かを助けます。

于 2016-05-24T10:09:15.613 に答える
3

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

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

于 2013-01-25T11:05:02.470 に答える
2

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

私のせいは、この行 @Html.ValidationMessageFor(m => ...) を忘れたことです。

TS のコードにはこれが含まれており、正しい軌道に乗せることができましたが、他の人への参照としてここに記載しました。

于 2016-01-06T09:24:52.820 に答える
1

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

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

あなたが必要

[Required]
public String AgreementNumber{get;set;}
于 2013-01-25T11:01:33.173 に答える
0

使用する：

@Html.EditorFor

それ以外の：

@Html.TextBoxFor

于 2016-11-08T16:27:17.550 に答える
0

この投稿に追加したいのですが、私は同じ問題を経験していましたが、PartialView.

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

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

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

参考文献:

于 2017-04-20T15:03:13.533 に答える