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