CS3014/05. Validation Controls | Application Development Tools

To Implement ASP.NET validation controls for multi-layered data integrity enforcement.

Open Table of contents

Introduction
Environment Setup
File Structure
Steps
Additional Scopes
References

Introduction

This lab demonstrates form validation using ASP.NET Core MVC Model Validation with Data Annotations and jQuery Unobtrusive Validation [1].

Environment Setup

VS Code with C# Dev Kit Extension
.NET SDK (Latest Stable Version)
Browser (Chrome/Edge/Firefox)

File Structure

ValidationLab/  
│── Controllers/  
│   ├── HomeController.cs  
│── Models/  
│   ├── UserModel.cs  
│── Views/  
│   ├── Home/  
│   │   ├── Index.cshtml  
│   ├── Shared/  
│   │   ├── _Layout.cshtml  
│── wwwroot/  
│   ├── css/styles.css  
│── Program.cs  
│── ValidationLab.csproj

Steps

1. Create a New ASP.NET Core MVC Project

dotnet new mvc -o ValidationLab
cd ValidationLab
code .

2. Define the Model (`Models/UserModel.cs`)

using System.ComponentModel.DataAnnotations;

namespace ValidationLab.Models;  
public class UserModel  
{  
    [Required(ErrorMessage = "Name is required")]  
    [StringLength(50, ErrorMessage = "Name cannot exceed 50 characters")]  
    public string Name { get; set; }  

    [Required(ErrorMessage = "Email is required")]  
    [EmailAddress(ErrorMessage = "Invalid email format")]  
    public string Email { get; set; }  

    [Required(ErrorMessage = "Age is required")]  
    [Range(18, 60, ErrorMessage = "Age must be between 18 and 60")]  
    public int Age { get; set; }  
}

3. Create Controller (`Controllers/HomeController.cs`)

using Microsoft.AspNetCore.Mvc;
using ValidationLab.Models;

namespace ValidationLab.Controllers;  
public class HomeController : Controller  
{  
    public IActionResult Index() => View(new UserModel());  

    [HttpPost]  
    public IActionResult Index(UserModel user)  
    {  
        if (ModelState.IsValid)  
            return Content($"Valid Data: {user.Name}, {user.Email}, {user.Age}");  
        return View(user);  
    }  
}

4. Create View (`Views/Home/Index.cshtml`)

@model ValidationLab.Models.UserModel

@{
    ViewData["Title"] = "Validation Form";
}

<h2>Validation Form</h2>

<form asp-action="Index" method="post">
    <div>
        <label asp-for="Name"></label>
        <input asp-for="Name" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>

    <div>
        <label asp-for="Email"></label>
        <input asp-for="Email" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>

    <div>
        <label asp-for="Age"></label>
        <input asp-for="Age" />
        <span asp-validation-for="Age" class="text-danger"></span>
    </div>

    <button type="submit">Submit</button>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

5. Enable Validation Scripts (`Views/Shared/_Layout.cshtml`)

Add this before </body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.5/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"></script>

6. Run the Application

dotnet run

Visit http://localhost:5164 and test the form validation.

Additional Scopes

Add custom validation attributes (e.g., UsernameShouldBeUnique).
Implement client-side validation messages using Bootstrap styles.
Integrate validation with AJAX requests.

References

[1] Microsoft Docs: Model Validation in ASP.NET Core MVC.
[2] jQuery Validation Unobtrusive Documentation.