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 –
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
