Part 85 Enable client side validation in asp net mvc

this part eighty five of asp.net MVC tutorial in this video we'll discuss enabling client-side validation in any speed augment MVC asp.net MVC offers several validation attributes examples include string length attribute range attribute regular expression attribute etc all of these validation attributes provide both client and server-side validation in the previous sessions of this video series we have discussed using these attributes and server-side validation in action in this video we'll discuss enabling client-side validation and there are two simple steps to achieve that step 1 enable client validation and unobtrusive javascript and web config file well this is what we mean by unobtrusive javascript in a later video session for now understand that both of these options need to be turned on within web config file and by default when we create a new asp.net MVC for application these options are already turned on for us so let's flip to the MVC demo project that we have been working with so within the root directory of your project there should be web config file and within that look at this we have this app settings element and we have these two options here client a validation enabled and unobtrusive javascript enable both of them are turned on okay so that's the first step the second step is to reference these three jQuery files so where am I going to get these jQuery files from we can either download them from jQuery website or if you create a new Internet and new MVC application using Internet application template then you will get scripts folder and all the jQuery scripts will be there ok so if you're wondering how do we create an MVC application using Internet application that's very straightforward so here when we actually go to file new project and when we sell like asp.net MVC for application once I click OK look at this you have the option to select the template now when we created this MVC demo project we have selected empty template and that's the reason why at the moment we don't have scripts folder there but then when I created this MVC application one I have chosen Internet application template so I caught scripts folder as well so let me open this in Windows Explorer copy all these script files and then let's go back to our MVC demo project let's add a folder to this project and let's call this scripts and let's paste our script files into that folder all right so we need three script files okay jQuery jQuery dot validate and jQuery dot validate dot unobtrusive so on whichever view we need to do client-side validation we can reference them there but in real time we actually reference the script files within the master page and the advantage of doing that is that this avoids the need to reference them on each and every view where we need validation but at the moment we don't have a master page here so I am directly going to reference them within the Edit view so let's navigate to the Edit view but before we reference them look at this at the moment you know 301 age you know that's not a valid age look at that I don't get any validation until I click the Save button so when I click Save that's when the form will be posted and the validation is done on the server side okay so let's enable client-side validation and see how it's going to work all right so let's reference T required script file so the first one is jQuery script file so let's drag and drop it right there and we need a jQuery validate file and we need jQuery validate unobtrusive okay and let's use the tilde four slash syntax so so basically the still character indicates a root directory so from the root directory navigate to scripts folder and within them files are required within that folder find the required scripts all right let's save everything and let's reload this view so at this point the JavaScript files should also be loaded and look at this the moment I type three zero one and then once I click away I get the validation error message immediately without me having to post back to the server okay look at this name cannot contain numbers the moment I enter and number there and click away I get the validation message immediately without a round-trip to the server so obviously this means the application is more responsive you get better user experience and this also improves the performance of your application because there are less round trips to the server so the load on the server is going to be reduced so just for getting a validation error message like this there's no point in posting back to the server okay so if possible always perform client-side validation and another important thing to keep in mind is the order of these scripts is also very important because jQuery dot validator unobtrusive this JavaScript is dependent on jQuery dot validate and that's dependent on jQuery so jQuery files you know basically they need to be in this order if they are not in this order then the client-side validation doesn't work so if you want to look at that in action look at this if I move this unobtrusive as the first file save that and let's actually reload this and let's try three zero one I click have a look at that I don't get any validation so the order in which you have referenced the files is also important all right another thing actually let's put that back to the right order and let's reload the sphere so that the script files will be loaded and then look at this this client-side validation will not work if the end user has disabled javascript within the browser so within the browser we can disable JavaScript so at the moment client-side validation is working but then if I go ahead and disable JavaScript and by the way to disable javascript within google chrome you click on the Settings button and then within the search box type JavaScript so click on content settings and look at this there is an option do not allow any site to run JavaScript so once I select that I click done so at this point javascript is disabled in this Plaza so let's actually close this and fire up another browser instance so we have JavaScript disabled so now when I you know type three zero one as they age tab away and look at this I don't get a validation so the client validation doesn't work in case at the end user disables JavaScript but the server-side validation will continue to work so when I click Save the form will be posted and the validation on the server will still be performed alright that's it for today thank you for listening have a great day

Channel: kudvenkat

Views: 125,835

Keywords: enable, client, side, validation, mvc, asp.net, data, model

Id: PLe7WbsuHPU

Length: 8min 10sec (490 seconds)

Published: Fri Aug 23 2013