JQuery、KnockOutJs などを使用して ASP.NET MVC アプリケーションを 1 つ作成しています。サインアップ用のモデルが 1 つあり、クライアント側の検証のみを使用します。
public class SignUp
{
[Required(ErrorMessageResourceType = typeof(Messages), ErrorMessageResourceName = MessagesConst.UserNameIsRequired, AllowEmptyStrings = false)]
[StringLength(30, ErrorMessageResourceName = MessagesConst.UserNameLength, ErrorMessageResourceType = typeof(Messages))]
[RegularExpression(@"^[a-zA-Z ]*$", ErrorMessageResourceType = typeof(Messages), ErrorMessageResourceName = MessagesConst.OnlyAlphabetsAndSpaceAreAllowed)]
public string UserName { get; set; }
[RegularExpression(@"^\s*[_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*(\.[A-Za-z]{2,4})[ ]*$", ErrorMessageResourceType = typeof(Messages), ErrorMessageResourceName = MessagesConst.InvalidEmail)]
[Required(ErrorMessageResourceType = typeof(Messages), ErrorMessageResourceName = MessagesConst.EmailIsRequired, AllowEmptyStrings = false)]
[StringLength(256, ErrorMessageResourceName = MessagesConst.EmailLength, ErrorMessageResourceType = typeof(Messages))]
public string Email { get; set; }
[DataType(DataType.Password)]
[StringLength(50, ErrorMessageResourceName = MessagesConst.PasswordRange, ErrorMessageResourceType = typeof(Messages),MinimumLength = 6)]
[Required(ErrorMessageResourceType = typeof(Messages), ErrorMessageResourceName = MessagesConst.PasswordRequired, AllowEmptyStrings = false)]
public string Password { get; set; }
[DataType(DataType.Password)]
[Compare("Password", ErrorMessageResourceName = MessagesConst.InvalidConfirmPassword, ErrorMessageResourceType = typeof(Messages))]
public string ConfirmPassword { get; set; }
public bool IsNewsLetter { get; set; }
public bool RememberMe { get; set; }
}
ビューに検証の概要を表示しています。
@using (Html.BeginForm("Registration", "Home", FormMethod.Post, new { id = "frmRegistration" }))
{
<div class="msg">
@Html.ValidationSummary(false)
</div>
<h1 class="title">@UserResource.lblSignUp</h1>
<div class="content_box signup">
<div class="sign_up">
<div class="left">
<div class="logo">
<a href="/" title="Home">
</a>
</div>
<div class="feat_text">
<h1>@LayoutResources.tglnCF</h1>
<p class="subtitle">@LayoutResources.tglnSubTitleCF</p>
</div>
<div class="bottom_box">
<strong>@UserResource.lblAlreadyAccountOnSocialnetwork</strong><br>
<span class="sing_in_direct"><a href="/Login">@UserResource.lblSignIn</a> directly from here.</span>
</div>
</div>
<div class="right">
@*Remove Placeholders for validation issue.*@
<div class="control-group">
<label class="blue">@UserResource.lblUserName</label>
<div class="controls">
@Html.TextBoxFor(m => m.UserName, new { @data_bind = "value:UserName, valueUpdate:['afterkeydown','propertychange','input']", placeholder = Placeholders.UserName, want_live_validation = true })
<span class="help-inline">
<span class="sprite"></span>
</span>
@*@Html.ValidationMessageFor(m => m.UserName)*@
</div>
</div>
<div class="control-group">
<label class="blue">@UserResource.lblEmail</label>
<div class="controls">
@Html.TextBoxFor(m => m.Email, new { @data_bind = "value:Email, valueUpdate:['afterkeydown','propertychange','input']", placeholder = Placeholders.Email, want_live_validation = true })
<span class="help-inline">
<span class="sprite"></span>
</span>
@*@Html.ValidationMessageFor(m => m.Email)*@
</div>
</div>
<div class="control-group">
<label class="blue">@UserResource.lblPassword</label>
<div class="controls">
@Html.PasswordFor(x => x.Password, new { @data_bind = "value:Password, valueUpdate:['afterkeydown','propertychange','input']", title = ToolTipResources.ttPassword, placeholder = Placeholders.Password, @class = "tooltip", want_live_validation = true })
<span class="help-inline">
<span class="sprite"></span>
</span>
@*@Html.ValidationMessageFor(m => m.Password)*@
<div class="m-t5">
<div data-bind="css:PasswordStrengthClass()"></div>
<span id='result' data-bind="text:PasswordStrengthMessage()"></span>
</div>
</div>
</div>
<div class="control-group">
<label class="blue">@UserResource.lblConfirmPassword</label>
<div class="controls">
@Html.PasswordFor(m => m.ConfirmPassword, new { @data_bind = "value:ConfirmPassword, valueUpdate:['afterkeydown','propertychange','input']", placeholder = Placeholders.ConfirmPassword, want_live_validation = true })
<span class="help-inline">
<span class="sprite"></span>
</span>
@*@Html.ValidationMessageFor(m => m.ConfirmPassword)*@
</div>
</div>
<label class="checkbox blue" for="checkbox1">
@Html.CheckBoxFor(m => m.IsNewsLetter, new { name = "check1", id = "checkTermAndPolicy" })
@UserResource.lblDiscoverNewProjectWithWeeklyNewsLetter
</label>
<p class="terms_text">
@UserResource.lblBySignInYouAgreeToOur <a href="/Terms/TermsOfUse.html" target="_blank">@UserResource.lblTermsOfUse</a> @UserResource.lblAnd <a href="/Terms/PrivacyPolicy.html" target="_blank">@UserResource.lblPrivacyPolicy</a>.
</p>
<div>
<p class="errorMassage"></p>
</div>
<input type="submit" value="SIGN UP">
</div>
<div class="clear"></div>
</div>
</div>
}
現在、要約は次のように表示
されますが、必須フィールドに対して発生するすべての検証が次のように表示されるようにその要約をカスタマイズしたい(ユーザー名、電子メール、パスワードが必要です。) または無効なフィールドに対して発生するすべての検証が次のように表示されます(無効な電子メールアドレス、ユーザー名、 Eメール。）