ASP.NET Core razor pages client side validation

Suggested Videos
Part 18 - TempData in ASP.NET Core | Text | Slides
Part 19 - ASP.NET Core razor pages validation | Text | Slides
Part 20 - Create form in asp.net core razor pages | Text | Slides

In this video we will discuss Client Side Validation in ASP.NET Core Razor Pages.


Implement client-side validation

Implementing client-side validation in ASP.NET Core Razor Pages is very simple. All we have to do is reference the following 3 script files in the order specified.

1. jquery.js
2. jquery.validate.js
3. jquery.validate.unobtrusive.js

Layout file or Individual razor page

Should we load these script files on the Layout page or on an individual razor page. The answer to this question really depends on where you need client-side validation. If you need client-side validation on several pages in your application, then load them using the Layout file.

If you need them on just one or two razor pages, then load them only on those razor pages. With this approach the script files are not unnecessarily downloaded if the user never visits those 1 or 2 specific razor pages.

_ValidationScriptsPartial.cshtml

If you have used the Web Application template and created a new asp.net core project using VisualStudio. You will most likely have the following partial view in the Shared folder. The name of the file is _ValidationScriptsPartial.cshtml and contains the following 2 script references

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

jQuery script file is already loaded by the Layout file. So we do not have to load it again.

In our case we need client-side validation only in the Edit razor page. Include the following scripts section on the Edit razor page to render the partial view. We will discuss partial views in our upcoming videos. We use partial tag helper, to render partial views.

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

We discussed layout sections in Part 29 of ASP.NET Core tutorial.

How client side validation works in asp.net core

Consider the following Name input element. We have used asp-for tag helper to bind to Name property of the Employee class.

<input asp-for="Employee.Name">

We have used [Required] attribute, on the Name property of the Employee class. This attribute makes the Name input field a required field. The following is the generated HTML.

<input id="Employee_Name" name="Employee.Name" type="text"

        data-val="true" data-val-required="Name is required" />

Notice we have several special data-* attributes. These attributes allow us to add extra information to an HTML element. data-val="true" enables client-side validation.  data-val-required attribute specifies the required validation error message to display if the validation fails. These data-* attributes carry all the information required to perform client-side validation. It is the unobtrusive library (i.e jquery.validate.unobtrusive.js) that reads these data-* attributes and performs client side validation.

Do we really need server side validation

We have client-side validation. So, do we really need server-side validation as well. The answer is a big YES.

As the name implies, client-side validation happens on the client-machine without a round trip to the web server. This obviously improves performance and user experience as the feedback is immediate.

However an end user can easily bypass the client-side validation by disabling JavaScript support in the browser. For this reason, you should never ever rely on just the client-side validation. Irrespective of whether we have client-side validation or not, we should always have server-side validation.

Client-side validation not working

If client-side validation does not work for you, please check the following.

Browser support for JavaScript should not be disabled

The following 3 script files must be loaded in the order specified

• jquery.js
• jquery.validate.js
• jquery.validate.unobtrusive.js

Make sure these script files are loaded for the environment you are testing against. Development, Staging, Production etc.