Validation
Validation
Unobtrusive Validation
Features
Sample
Create an account
Description
This sample shows the basic usage of the unobtrusive validation.
Source
RegisterController.cs
using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; 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(ValidationRes.Register_RegistrationComplete)</h3></p> <div style="height:200px"> @Html.Raw(ValidationRes.Register_Text0) @Model.Name@Html.Raw(ValidationRes.Register_Text1) </div> } else { @section Scripts{ <script src="~/Scripts/jquery.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> } <h3>@Html.Raw(ValidationRes.Register_CreateAnAccount)</h3> <br /> <form asp-action="Register"> <div class="container" style="width: 100%"> <div class="row"> <div class="col-md-2"> <label asp-for="Name"></label> </div> <div class="col-md-2"> <c1-input-mask for="Name" width="100%"></c1-input-mask> </div> <div class="col-md-4"> <span asp-validation-for="Name"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="Email"></label> </div> <div class="col-md-2"> <c1-input-mask for="Email" width="100%"></c1-input-mask> </div> <div class="col-md-4"> <span asp-validation-for="Email"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="Password"></label> </div> <div class="col-md-2"> <input type="password" asp-for="Password" class="form-control" /> </div> <div class="col-md-4"> <span asp-validation-for="Password"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="ConfirmPassword"></label> </div> <div class="col-md-2"> <input type="password" asp-for="ConfirmPassword" class="form-control" /> </div> <div class="col-md-4"> <span asp-validation-for="ConfirmPassword"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="Phone"></label> </div> <div class="col-md-2"> <c1-input-mask for="Phone" mask="+8600000000000" width="100%"></c1-input-mask> </div> <div class="col-md-4"> <span asp-validation-for="Phone"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="Country"></label> </div> <div class="col-md-2"> <c1-auto-complete for="Country"> <c1-items-source source-collection="UsersData.Countries"></c1-items-source> </c1-auto-complete> </div> <div class="col-md-4"> <span asp-validation-for="Country"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="Industry"></label> </div> <div class="col-md-2"> <c1-combo-box for="Industry" display-member-path="name" selected-value-path="value"> <c1-items-source source-collection="UsersData.Industries"></c1-items-source> </c1-combo-box> </div> <div class="col-md-4"> <span asp-validation-for="Industry"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="Birthdate"></label> </div> <div class="col-md-2"> <c1-input-date for="Birthdate"></c1-input-date> </div> <div class="col-md-4"> <span asp-validation-for="Birthdate"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="FavoriteColor"></label> </div> <div class="col-md-2"> <c1-input-color for="FavoriteColor"></c1-input-color> </div> <div class="col-md-4"> <span asp-validation-for="FavoriteColor"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="Skills"></label> </div> <div class="col-md-2"> <c1-multi-select for="Skills"> <c1-items-source source-collection="UsersData.SkillsList"></c1-items-source> </c1-multi-select> </div> <div class="col-md-4"> <span asp-validation-for="Skills"></span> </div> </div> <div class="row"> <div class="col-md-2"> <label asp-for="Hobbies"></label> </div> <div class="col-md-2"> <c1-multi-auto-complete for="Hobbies"> <c1-items-source source-collection="UsersData.HobbyList"></c1-items-source> </c1-multi-auto-complete> <div class="text-muted">@Html.Raw(ValidationRes.Register_Text3)</div> </div> <div class="col-md-4"> <span asp-validation-for="Hobbies"></span> </div> </div> <p><input type="submit" value="@(ValidationRes.Register_Register)" class="btn btn-primary" /></p> </div> </form> } @section Description{ @Html.Raw(ValidationRes.Register_Text2) }
UserInfo.cs
using System; using System.ComponentModel.DataAnnotations; 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(Localization.ValidationRes), ErrorMessageResourceName = "Register_Name_ErrorMessage")] public string Name { get; set; } [Required] [EmailAddress] public string Email { get; set; } [Required] [MinLength(6)] [MaxLength(16)] public string Password { get; set; } [Required] [Compare("Password")] public string ConfirmPassword { get; set; } [Required] [MinLength(8)] [MaxLength(11)] 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 string FavoriteColor { get; set; } [Required] [MinLength(2)] [MaxLength(3)] public string[] Skills { get; set; } [Required] public string[] Hobbies { get; set; } } }
Documentation