Validation
Validation
Unobtrusive Validation
Features
Sample
Create an account
Description
This sample shows the basic usage of the unobtrusive validation.
Source
RegisterController.cs
using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcExplorer.Controllers { public class ValidationController : Controller { [HttpGet] public ActionResult Register() { return View(new UserInfo() { Country = "" }); } [HttpPost] public ActionResult Register(UserInfo userInfo) { ViewBag.IsValid = ModelState.IsValid; return View(userInfo); } } }
Register.cshtml
@model UserInfo @if (ViewBag.IsValid == true) { <p><h3>@Html.Raw(Resources.Validation.Register_RegistrationComplete)</h3></p> <div style="height:200px"> @Html.Raw(Resources.Validation.Register_CongratulationsTo)@Model.Name@Html.Raw(Resources.Validation.Register_RegistrationSuccessfully) </div> } else { @section Scripts{ @Scripts.Render("~/jquery") @Scripts.Render("~/jqueryval") } <h3>@Html.Raw(Resources.Validation.Register_CreateAnAccount)</h3> <br /> using (Html.BeginForm()) { <div class="container" style="width: 100%"> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Name) </div> <div class="col-md-2"> @Html.C1().InputMaskFor(m => m.Name).Width("100%") </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Name) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Email) </div> <div class="col-md-2"> @Html.C1().InputMaskFor(m => m.Email).Width("100%") </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Email) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Password) </div> <div class="col-md-2"> @Html.PasswordFor(m => m.Password, new { @class = "form-control" }) </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Password) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.ConfirmPassword) </div> <div class="col-md-2"> @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" }) </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.ConfirmPassword) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Phone) </div> <div class="col-md-2"> @Html.C1().InputMaskFor(m => m.Phone).Mask("+8600000000000").Width("100%") </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Phone) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Country) </div> <div class="col-md-2"> @Html.C1().AutoCompleteFor(m => m.Country).Bind(b => b.Bind(UsersData.Countries)) </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Country) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Industry) </div> <div class="col-md-2"> @Html.C1().ComboBoxFor(m => m.Industry).Bind(b => b.Bind(UsersData.Industries)).SelectedValuePath("value").DisplayMemberPath("name") </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Industry) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Birthdate) </div> <div class="col-md-2"> @Html.C1().InputDateFor(m => m.Birthdate) </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Birthdate) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.FavoriteColor) </div> <div class="col-md-2"> @Html.C1().InputColorFor(m => m.FavoriteColor) </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.FavoriteColor) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Skills) </div> <div class="col-md-2"> @Html.C1().MultiSelectFor(m => m.Skills).Bind(b => b.Bind(UsersData.SkillsList)) </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Skills) </div> </div> <div class="row"> <div class="col-md-2"> @Html.LabelFor(m => m.Hobbies) </div> <div class="col-md-2"> @Html.C1().MultiAutoCompleteFor(m => m.Hobbies).Bind(b => b.Bind(UsersData.HobbyList)) <div class="text-muted">@Html.Raw(Resources.Validation.Register_HobbiesPrompt)</div> </div> <div class="col-md-4"> @Html.ValidationMessageFor(m => m.Hobbies) </div> </div> <p><input type="submit" value="@(Resources.Validation.Register_Register)" class="btn btn-primary" /></p> </div> } } @section Description{ @Html.Raw(Resources.Validation.Register_Text0) }
UserInfo.cs
using System; using System.Linq; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Drawing; namespace MvcExplorer.Models { public class UserInfo { public UserInfo() { Birthdate = DateTime.Now; } public int Id { get; set; } [Required] [RegularExpression(pattern: "^[a-zA-Z0-9]{4,10}$", ErrorMessageResourceType = typeof(Resources.Validation), ErrorMessageResourceName = "Register_Name_ErrorMessage")] public string Name { get; set; } [Required] [RegularExpression(pattern: @"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", ErrorMessageResourceType = typeof(Resources.Validation), ErrorMessageResourceName = "Register_Email_ErrorMessage")] public string Email { get; set; } [Required] [StringLength(16, MinimumLength = 6)] public string Password { get; set; } [Required] [Compare("Password")] public string ConfirmPassword { get; set; } [Required] [StringLength(11, MinimumLength = 8)] public string Phone { get; set; } [Required] public string Country { get; set; } [Required] public string Industry { get; set; } [Required] public DateTime Birthdate { get; set; } [Required] public Color? FavoriteColor { get; set; } [Required] public string[] Skills { get; set; } [Required] public string[] Hobbies { get; set; } } }
Documentation