Part 40. Client Side Validation in .NET Core MVC. | jquery-validate-unobtrusive | jquery-validate

[Music] hello friends welcome to programming concepts my name is amit and this is part 40 of asp.net core mvc tutorial in this video we will implement client-side validation in dot-net core mpc this is continuation to part 39 insert into sql database in dotnet core mpc so please watch it before proceeding to this one i shared the link in the description in our previous video we have seen that the model validator performs this validation on the server side which requires a round trip to the server this is not recommended because there is a time lag before the user gets the error message from the server so to enable client-side validation by far the easiest solution is to use unobtrusive client-side validation the asp.net core includes unobtrusive client-side validation libraries which makes it easier to add client-side validation code without writing a single line of code let's see how we can implement this first we need to install few client-side libraries the first one is jquery hyphen validate library the second one is the jquery validate unobtrusive library and the last but not the least jquery itself let's install all of them let's get back to visual studio so right click on the w3 root folder add client-side library in the library box type jquery hyphen validate include all library files and click on install in the solution explorer you can see folder jquery hyphen validate has been created let's install the second library repeat the same step right click on the w3 root folder add client-side library and in the library box type jquery hyphen validation hyphen and after yourself include all library files and click on install in the solution explorer you can see folder for jquery hyphen validation hyphen unoption has been created now we need to use both the scripts in add employee page let's do that let's go to add employee dot cs html page use a section for a script that we had created on our layout page let's go to our layout page to check what name we had provided for that so within the shared folder we have our layout page at the bottom you can see we already created a section and the name for that section is script so let's create this section on our add employee page so add section scripts and curly braces let's add both the scripts if you check in the solution explorer we have jquery hyphen validate and within it we have jquery.validate.man.js so script type is equal to text slash javascript source is equal to tilde sign slash jquery hyphen validate slash jquery.validate.min.js next if you look at the path in solution explorer we have jquery hyphen validation hyphen unobtrusive folder within w3 root and within this folder we have jquery dot validate dot and up to yousef.js file so script type is equal to text slash javascript source is equal to tilde sign slash jquery hyphen validation hyphen unopt yourself slash jquery dot validate dot and up to save dot js all right next we required jquery let's see if it is already added to the layout page no not available but we had used it on our index page let's see if it is available there yes here it is let's delete this section it was only for demo purposes let's include this script in our layout page as it is mandatory script for almost all the pages so cut the script delete this section for now and paste it into our layout page just above the script section and that's it we are done with our validation code at script level the unobtrusive validation is done using the jquery dot validate dot on up unup truesif.js library this library is built over the top of jquery.validate.js library which in turn uses the jquery hence we need to import all these in our views the next step is to apply validation attributes to input properties at the class level let's go to our employee class and you can see we already applied the required validation in our previous video so no modification is required the attributes we add when we set up the server side validations also used by the client side validation and finally we need to apply validation for attributes at the view level let's go to add employee view and you can see we already added this attribute in our last video so no modification is required here as well let's see if the breakpoint is placed or not and add employee action method and let's run the program navigate to employee slash add employee click on submit and you can see there is no postback validation happened on the client side so we successfully implemented client-side validation in our code but if you look at our code our add employee.cs html within this script section we added a couple of scripts now because our project is very basic and very small you can see only a couple of scripts but in real world projects you can expect many validation scripts same scripts will be required when we add more pages that require the same validations for example when we implement the added employee page the same scripts will be required in such a scenario we have to add those scripts to that page as well so to avoid this repetition one step is to add these scripts to our layout page but the problem is many static pages will not require such scripts so what to do we'll see that in our next video all right then that's it in this video if you have any queries related to the content of this video do ask me in comments till then thanks for watching [Music]

Channel: PRO Concepts

Views: 1,600

Keywords: .net core, asp.net core client validation, asp.net core javascript validation, asp.net core mvc client side validation, asp.net core unobtrusive validation, asp.net core unobtrusive validation not working, asp.net core client side validation not working, asp.net core mvc client side validation not working, asp.net core client side validation example, asp.net core enable client side validation, asp.net core client validation not working, client side validation in asp.net core mvc

Id: 4aJOk-1W0FQ

Length: 8min 54sec (534 seconds)

Published: Sun Jun 19 2022