Add Client-Side & Server-Side Validation in ASP.NET Core MVC

Validation ensures users enter correct data before saving anything into the database. ASP.NET Core MVC gives you validation on both sides:

  • Server-side validation → Happens in controller

  • Client-side validation → Happens in the browser using jQuery Validation

In this part, you will add validation to the Student model and integrate it with your Create/Edit forms.

1. Add Validation Attributes to the Model

Open Models/Student.cs:

using System.ComponentModel.DataAnnotations;

public class Student
{
    public int Id { get; set; }

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

    [Range(1, 150, ErrorMessage = "Age must be between 1 and 150")]
    public int Age { get; set; }
}

These attributes automatically:

  • Validate input on form submit (server-side)

  • Generate client-side validation rules

2. Server-Side Validation (Controller)

Your existing controller already contains ModelState checks:

if (!ModelState.IsValid)
{
    return View(student);
}

Server-side validation is complete with this.

3. Enable Client-Side Validation

To enable browser-side validation, add the following in your layout file.

Open Views/Shared/_Layout.cshtml → before closing </body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/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>

These scripts enable:

  • Required field alerts

  • Length validation

  • Range validation

  • Real-time error messages

4. Add Validation Messages in the View

You already added them in Part 5, but here’s an example with error summaries:

Create.cshtml / Edit.cshtml

@model Student

<h2>Create Student</h2>

<form asp-action="Create">
    
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    <div class="form-group">
        <label asp-for="Name"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>

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

    <button class="btn btn-primary">Save</button>
</form>

5. Let’s Test It

Case 1 → Empty Name

You get error:

  • "Name is required"

Case 2 → Name > 50 characters

Error:

  • "Name cannot exceed 50 characters"

Case 3 → Age = 0

Error:

  • "Age must be between 1 and 150"

Case 4 → Valid data

Form submits successfully.

6. Summary of Part 6

  • ✔ Added model validation attributes

  • ✔ Enabled server-side validation

  • ✔ Integrated client-side validation (jQuery + unobtrusive)

  • ✔ Added error messages and summaries

  • ✔ Both Create and Edit forms now validate data before saving