Add validation to an ASP.NET Core Razor Page

Validation ASP.NET Core 2.2 MVC | Login Client-Side Validation

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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^