public class ChangePasswordModel
{
[Required]
[DataType(DataType.Password)]
[Display(Name = "Current password")]
public string OldPassword { get; set; }
[Required]
[ValidatePasswordLength]
[DataType(DataType.Password)]
[Display(Name = "New password")]
public string NewPassword { get; set; }
[DataType(DataType.Password)]
[Display(Name = "Confirm new password")]
[Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }
}
Razor syntax:
@model MvcApplication3.Models.RegisterModel
@{
ViewBag.Title = "Register";
}
<h2>Create a New Account</h2>
<p>
Use the form below to create a new account.
</p>
<p>
Passwords are required to be a minimum of @ViewBag.PasswordLength characters in length.
</p>
<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()) {
@Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
<div>
<fieldset>
<legend>Account Information</legend>
<div class="editor-label">
@Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Email)
</div>
<div class="editor-field">
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</div>
<div class="editor-label">
@Html.LabelFor(m => m.ConfirmPassword)
</div>
<div class="editor-field">
@Html.PasswordFor(m => m.ConfirmPassword)
@Html.ValidationMessageFor(m => m.ConfirmPassword)
</div>
<p>
<input type="submit" value="Register" />
</p>
</fieldset>
</div>
}
javascript syntax:
(function($) {
$.extend($.fn, {
// http://docs.jquery.com/Plugins/Validation/validate
validate: function( options ) {
/// <summary>
/// Validates the selected form. This method sets up event handlers for submit, focus,
/// keyup, blur and click to trigger validation of the entire form or individual
/// elements. Each one can be disabled, see the onxxx options (onsubmit, onfocusout,
/// onkeyup, onclick). focusInvalid focuses elements when submitting a invalid form.
/// </summary>
/// <param name="options" type="Options">
/// A set of key/value pairs that configure the validate. All options are optional.
/// </param>
/// <returns type="Validator" />
// if nothing is selected, return nothing; can't chain anyway
if (!this.length) {
options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
return;
}
// check if a validator for this form was already created
var validator = $.data(this[0], 'validator');
if ( validator ) {
return validator;
}
validator = new $.validator( options, this[0] );
$.data(this[0], 'validator', validator);
if ( validator.settings.onsubmit ) {
// allow suppresing validation by adding a cancel class to the submit button
this.find("input, button").filter(".cancel").click(function() {
validator.cancelSubmit = true;
});
// when a submitHandler is used, capture the submitting button
if (validator.settings.submitHandler) {
this.find("input, button").filter(":submit").click(function() {
validator.submitButton = this;
});
}
Read my blog | Twitter Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
XIII
All-Star
182787 Points
23484 Posts
ASPInsiders
Moderator
MVP
Testing
Jan 12, 2011 09:09 AM|LINK
C# code:
public class ChangePasswordModel { [Required] [DataType(DataType.Password)] [Display(Name = "Current password")] public string OldPassword { get; set; } [Required] [ValidatePasswordLength] [DataType(DataType.Password)] [Display(Name = "New password")] public string NewPassword { get; set; } [DataType(DataType.Password)] [Display(Name = "Confirm new password")] [Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")] public string ConfirmPassword { get; set; } }Razor syntax:
@model MvcApplication3.Models.RegisterModel @{ ViewBag.Title = "Register"; } <h2>Create a New Account</h2> <p> Use the form below to create a new account. </p> <p> Passwords are required to be a minimum of @ViewBag.PasswordLength characters in length. </p> <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()) { @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.") <div> <fieldset> <legend>Account Information</legend> <div class="editor-label"> @Html.LabelFor(m => m.UserName) </div> <div class="editor-field"> @Html.TextBoxFor(m => m.UserName) @Html.ValidationMessageFor(m => m.UserName) </div> <div class="editor-label"> @Html.LabelFor(m => m.Email) </div> <div class="editor-field"> @Html.TextBoxFor(m => m.Email) @Html.ValidationMessageFor(m => m.Email) </div> <div class="editor-label"> @Html.LabelFor(m => m.Password) </div> <div class="editor-field"> @Html.PasswordFor(m => m.Password) @Html.ValidationMessageFor(m => m.Password) </div> <div class="editor-label"> @Html.LabelFor(m => m.ConfirmPassword) </div> <div class="editor-field"> @Html.PasswordFor(m => m.ConfirmPassword) @Html.ValidationMessageFor(m => m.ConfirmPassword) </div> <p> <input type="submit" value="Register" /> </p> </fieldset> </div> }javascript syntax:
(function($) { $.extend($.fn, { // http://docs.jquery.com/Plugins/Validation/validate validate: function( options ) { /// <summary> /// Validates the selected form. This method sets up event handlers for submit, focus, /// keyup, blur and click to trigger validation of the entire form or individual /// elements. Each one can be disabled, see the onxxx options (onsubmit, onfocusout, /// onkeyup, onclick). focusInvalid focuses elements when submitting a invalid form. /// </summary> /// <param name="options" type="Options"> /// A set of key/value pairs that configure the validate. All options are optional. /// </param> /// <returns type="Validator" /> // if nothing is selected, return nothing; can't chain anyway if (!this.length) { options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" ); return; } // check if a validator for this form was already created var validator = $.data(this[0], 'validator'); if ( validator ) { return validator; } validator = new $.validator( options, this[0] ); $.data(this[0], 'validator', validator); if ( validator.settings.onsubmit ) { // allow suppresing validation by adding a cancel class to the submit button this.find("input, button").filter(".cancel").click(function() { validator.cancelSubmit = true; }); // when a submitHandler is used, capture the submitting button if (validator.settings.submitHandler) { this.find("input, button").filter(":submit").click(function() { validator.submitButton = this; }); }Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!