MVC3単純フォーム検証

Question

私はMVC3を初めて使いました。初めてフォームを検証します。 jQueryを使用し、Model.IsValidを使用していくつかの検証サンプルを見ましたが、これが私の場合であるかどうかわかりません。

私はHtml.TextBox @使っている、とHtml.ValidationMessage @、私は私が検証するために、私の文書に2本のjQueryのラインを配置する必要が見ることができます。

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

そして、私は多くの人が検証を使用することを見ましたjQueryでしか使えませんでしたが、実際にどのように動作するかは分かりませんでした。では、jQuery（必要な場合）とControllerについて、Razor Viewのサンプル検証コードを教えてください。 TextBoxForを使用していないので、ModelクラスのDatannotationsでのみ検証を使用することはできません。

私は検証する必要があるフォーム：

@Html.TextBox("user", "User:") 
@Html.TextBox("email", "Email:") <!-- with validation of email string --> 
@Html.Password("password") 
@Html.Password("passwordConfirm") <!-- with validation if 2 password strings match --> 

Answer 1

jquery.validate.unobtrusive.min.jsスクリプトは、お使いのモデルのプロパティに配置されたデータの注釈と連携して動作します。これらのバリデータ属性は、HTMLヘルパーによって翻訳され、スクリプトによって使用されるHTML5 data- *属性を出力します。検証属性で装飾されたモデルがない場合、このスクリプトは使用できません。

これは、検証属性を持つモデルがまだあり、TextBoxForではなくTextBoxを使用している可能性があると言われています。それは完全に愚かで無意味だろうが、あなたはそれを行うことができます。

public class MyViewModel 
{ 
    [Required] 
    public string MyProperty { get; set; } 
} 

と、フォーム内のヘルパーの1 を使用するときに、あなたのビューで検証属性が放出される。

@model MyViewModel 
@using (Html.BeginForm()) 
{ 
    @Html.TextBox("MyProperty") 
} 

をビューモデルを持っていない場合（ビューモデルを持たない理由が分からないので、私が説いている良いプラクティスに反する）、検証を手動で行うことができます。この場合、あなたは、単にjquery.validate.unobtrusiveスクリプトを削除し、コアjqueryの検証プラグインを使用します。

$(function() { 
    $('#id_of_your_form').validate({ 
     rules: { 
      MyProperty: { 
       required: true 
      } 
     }, 
     messages: { 
      MyProperty: { 
       required: 'Please enter a value for MyProperty' 
      } 
     } 
    }); 
}); 

明らかに推奨されるソリューションは、ビューモデルを使用することであると強くヘルパーを入力：

あなたの中

public class RegisterViewModel 
{ 
    public string User { get; set; } 

    [DataType(DataType.EmailAddress)] 
    [Email] // taken from Scott Gu's blog post: http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx 
    public string Email { get; set; } 

    public string Password { get; set; } 

    [Compare("Password")] 
    public string PasswordConfirm { get; set; } 
} 

、その後、表示：

@model RegisterViewModel 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
@using (Html.BeginForm()) 
{ 
    <div> 
     @Html.LabelFor(x => x.User) 
     @Html.EditorFor(x => x.User) 
     @Html.ValidationMessageFor(x => x.User) 
    </div> 
    <div> 
     @Html.LabelFor(x => x.Email) 
     @Html.EditorFor(x => x.Email) 
     @Html.ValidationMessageFor(x => x.Email) 
    </div> 
    <div> 
     @Html.LabelFor(x => x.Password) 
     @Html.PasswordFor(x => x.Password) 
     @Html.ValidationMessageFor(x => x.Password) 
    </div> 
    <div> 
     @Html.LabelFor(x => x.PasswordConfirm) 
     @Html.PasswordFor(x => x.PasswordConfirm) 
     @Html.ValidationMessageFor(x => x.PasswordConfirm) 
    </div> 
    <button type="submit">Register</button> 
}