This article will cover adding client-side
validation to the ASP.NET Core 2.2. Sometimes we just need a really simple
login system for an application. Now I am validating using fields email and
password only.
Add
validation rules to the Login model:
public class LoginViewModel
{
[Required]
[EmailAddress]
[Display(Name = "Email
Address")]
public string
Email { get; set; }
[Required]
[StringLength(60, MinimumLength = 6)]
[DataType(DataType.Password)]
public string
Password { get; set; }
}
The DataAnnotations applied to the class change
the schema. The DataAnnotations applied to the Password field.
1. Passwords
must be at least 6 characters.
2. Limits
the characters to 60
3. Doesn't
allow a null value
Validation
Error UI in Razor Pages –
@model WebApp.Models.LoginViewModel
<h2>Login</h2>
<form asp-controller="Account" asp-action="Login" method="post">
<div class="form-group">
Email:
<input asp-for="Email" /><br />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
Password: <input asp-for="Password" /><br />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
@Html.AntiForgeryToken()
</form>
The Rendered Login form looks like this..
<form method="post" action="/">
<div class="form-group">
Email:
<input type="email" data-val="true" data-val-email="The
Email Address field is not a valid e-mail address." data-val-required="The
Email Address field is required." id="Email" name="Email" value="" /><br />
<span class="text-danger
field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
Password: <input type="password" data-val="true" data-val-length="The
field Password must be a string with a minimum length of 6 and a maximum length
of 60." data-val-length-max="60" data-val-length-min="6" data-val-required="The
Password field is required." id="Password" maxlength="60" name="Password" /><br />
<span class="text-danger
field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
The
MVC controller code -
public class AccountController
: Controller
{
[HttpPost]
[ValidateAntiForgeryToken]
public
ActionResult Login(LoginViewModel model)
{
try
{
if
(ModelState.IsValid)
{
//Execute
your logic
}
}
catch
(Exception ex)
{
throw;
}
return
View(model);
}
}
Result looks like –
