ASP NET Core client side validation

this is putt 74 of asp.net code tutorial in this video well discus implementing client-side validation in a spirit core we discussed implementing server-side validation in parts 42 and 43 of this asp.net core tutorial server side validation is implemented by using validation attributes such as required string lengths etc as the name implies server-side validation is done on the server so there is a round-trip between the client browser and the web server the request has to be sent over the network to the web server for processing this means if the network is slow or if the server is busy processing other requests the end user may have to wait a few seconds and it also increases load on the server this validation can be performed on the client machine itself which means there is no round-trip to the server no waiting time client has instant feedback and the load on the server is also reduced to a great extent now consider this login view we've got two input fields email and password the model for this view is this login view model class and these two input fields on the view email and password are bound to these two properties that is email and password within the login view model class to make the input fields required all we did was decorate the corresponding properties within the login view model with required attributes at this point if we try to login without providing values for email and password fields we get required validation errors at the moment this validation is happening on the server we can very easily prove this of a project is running in debug mode we already have a breakpoint on the login action of our account controller now let's try to login without providing values for email and password notice of a breakpoint is head and if I continue the execution we see the validation errors as expected the point that I am trying to make is to implement server-side validation we decorate the respective model class properties with the validation attributes like required string lengths etc now to implement client-side validation we can make use of these same validation attributes to get the client-side validation working in asp.net core we need these three script files in the order that is specified right here in our project we already included a reference to jQuery so if we take a look at our layout view notice jQuery is already referenced here at the moment our project is still running in debug mode let's stop it first in addition to jQuery we also need this client-side library jQuery dot welded dot J's I'm going to use library manager to install this client-side library so right click on the project name add client-side library notice as I type jQuery we get intelligence as well the client-side library that we want to install is jQuery validate so I select that and then click the install button if we take a look at the Lib folder notice we have a folder for jQuery validation library and we want to reference jQuery dot validate jas and we want to do that after jQuery so let me drag and drop it right after jQuery finally we also need this client-side library jQuery dot validate dot unobtrusive dot J's so let's use library manager one more time and install this unobtrusive validation library search for jQuery validation unobtrusive and then finally click the install button there we go we have a folder for take very validation unobtrusive let's drag and drop this script file after jQuery dot validate dot j/s if you are wondering why is this called unobtrusive validation well unobtrusive validation allows us to take the existing server-side validation attributes and use them to implement client-side validation and that's exactly what we are doing here we did not write a single line of custom JavaScript code to implementing client-side validation all we need is these three script files in the order that is specified right here with these three script files in place let's run our project in debug mode one more time there we go we have our list page now let's go to the login page and try to login without providing email and password notice we get our required validation errors as expected at the moment this validation is happening on the client machine without a round-trip to the server and we can be sure about that because at the moment within our account controller they still have the breakpoint on our login action and when we click the login button this breakpoint is not hit so the validation is happening on the client machine notice we also have instant feedback as soon as I start to type in the password field the required validation error disappears as soon as I delete that last one character the required validation error reappears immediately because at the moment the validation is happening on the client machine without a round-trip to the server so this means the load on the server is also reduced and we have a create user experience as the name implies this unobtrusive validation is done by this client-side library jQuery dot validate dot unobtrusive dot je s and this library is built on top of jQuery dot Val Adid dot J's and this library has a dependency on jQuery so this is the reason we need to reference these three script files in the order that is specified right here and install these client-side libraries we used library manager we discussed library manager in detail in part 34 of this video series now let's understand how client-side validation actually works in a speed or net core if we take a look at our login view notice they using the input tag helper to generate an input field for email and this input field is bound to email property of all login view model and if we take a look at our login view the email property is decorated with the required attribute and the email address attributes now if we take a look at the generated HTML let me zoom this in a bit notice the HTML that is generated for this email input field there are several data - attributes so tag helpers in asp.net core work in combination with the validation attributes and generate these data - attributes these attributes allow us to add extra information to an HTML element in this case these data - Val attributes carry all the required information to perform the client-side validation the unobtrusive validation library that is jQuery dot validate dot unobtrusive j/s reads these data - Val attributes and performs the client-side validation next let's look at some of the common reasons why client-side validation may not be working on your machine make sure in the browser that you are using javascript is enabled if it's disabled client-side validation will not work all the three validation scripts must be loaded in the order that is specified right here also make sure these scripts are loaded for the environment that you are testing against at the moment if we take a look at launch settings dot JSON file notice the a spinet cor environment variable value is set to development and for development environment we are loading the required script files so if we run this project in the development environment client-side validation works as expected but if you look at in non development environment such as staging or production we are not loading these 3 script files so if we change the ESP net core environment variable value to staging or production and then run this project client-side validation will not work because for a non development environment we are not loading the required script files that's it in this video thank you for listening [Music]

Channel: kudvenkat

Views: 68,168

Keywords: 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

Id: PUX3PzyBofg

Length: 9min 2sec (542 seconds)

Published: Wed Jun 19 2019