ASP.NET MVC - Client Side Form Validation

in this video we are going to learn jQuery form validation with asp.net MVC before I going to start I would like to ask you a favor if you found this video helpful please like and subscribe my channel let's start form component is an important person of any website that requires data input form the end user since the data required on form is input by end user it is the responsibility of a developer to ensure that kind of information the end user is allowed during register waveform validation is it two times first one is a client-side validation and second one is your server-side validation the client-side validation is done at the browser level transferred form validation also helps in providing better user interactivity with the website while the verification or validation of input data is being done at the server-side let's start first open the visual studio create a new project wave yes we got a rave application and I'm going to write wave app client-side while it is click on OK select empty MVC project click on OK now you can see that MVC boilerplate code has been created now first of all need to right-click on the project go to the manage NuGet package finishes go to the browser when you stop on obtrusive install you get one stall click on I accept now I can see that that one obtrusive validation has been install successfully install now open that he already France open the reference our that is crude fat here you can see that it's a to file then non-obtrusive that will jquery validation on obtrusive mean and one is a jittery bernadette toward mean NTS just closed and friend right-click on a model and add one class that is a register view model otherwise you can create one folder for a view model i am going to add in every in the model folder so we'll to write like a register mu model now here I'm going to add some properties now you can see here yeah here I have added that for poor bodies first one is a user name email password and confirm password now right-click on a controller had one controller to add one controller that is controller going to give the name that is a home controller okay so now I click on the index add one in in there click on add so here you can see that when an index is to follow has been added so first now go to that one seer folder there is a one layout dot CSS tml he had need to add that to your script file go to that a script folder here first one drag that you can drag that valued at 14th or chase one one one more is that con obtrusive okay that toucan has been added just save it now open that he is doctor in desert see a suitable here like that your poor first of all that I need to call that for model a model then call that word register view models just copy then paste it here and that will be qualified name that is a register via water here need to write like a using and here HTML the begin form and that one will be the going to be will be index and the controller will be the home and this one will be the forum post method and going to write the test you have to put that is your ID ID I'm going to write like a form register that is in the from register making it all good that your name is that form register this minmei's now let's just add first one we're going to add that TV that class blue with a container container that next one will be there your deal this one your class will do not like a foam loop okay foam grow so first one is that label for that modern model dot your first one is a username and the new then class that will be the your control desk label another one going to add like HTML dot text box for simple model modeled of user username and then another one is I attribute have seen one like it class equal to your form control seaman I'm going to copy for your password this one for email then password then confirm password so just change that new this one is the email which is copy paste this one is your password this piece this one is the password that this one is you confirm password okay now I'm going to add that button thirteen this one is the class the form group or need to have that input we got submit submit then value will be the register the name also to the register and then class actually the button button - plenary okay not that I'm going to leave that paradise on so drag that jQuery mean dot GS rack that a script and that type is too so now he ever - I'd like a document or a difference and document or a difference and Here I am going to get the funds are going to write a jQuery invalidation or we can write like Tyneside well it isn't signed where I guess I'm done so here need to write like this one form dollar dot validate Tezz it in us one day so much properties is that just like it this one is invalidated so first one I am going to add that one is a root then another one will be the error message this one with the username the same one this one then copy this if you want even copy this one that using username or no first of all you to write like a rules so far so we are going to write our rules this one will be the rules okay inside the rules so the same one you have to copy the register view model this one first one is a username so go to that user yeah right that username inside that you have to write this one will be they your braces and yet that required should be true this one will be the true require because it's a username is required and second one this one also only that is earning is required and second make a comma then after that username just after that user then then it will come thank you email so what all fields I am going to check this email required this one is required so right required this one will be that true and this one is a email so email also it will be the two okay same like other another one another one is your password so this one is the password so write that this one password is also required required is that true the second one I'm going to write like a mean the length mean length this one also mean length will be the six character the next one is that I'm going to write confirm password just copy this one this one is the confirm partial just copy and paste it here so this one is also required required Avila true mean length will match so next one will be with the equal to it should be matched with the your password this one so till now it's done after that once a rule you have mentioned so then next one will be the messages that will be the error message so here so first one seem like that just like what Rehim and Sania same way you have to write like a error message so based way is there just copied till here okay paste it here instead of true you have to write that message require so here you can I hide your user name is required okay okay so to see man copy this one this message and paste it here so here again I'd like an email email is required so once I've u dot inter so it will give that this error message so email also here this one in tab valid email address okay that is a very demanding seem like here after my it like a password password is required okay here light has a minimum length of password is six seemed like here for password is that is your confirm password confirm password is required and equal to so here we can act like a password and confirm password should be see that is done just this one probably this one here and paste it in that document totally depends on just save it now first of all the same place the Intel open the so Lucifer here need to drag this one it here okay second thing this one will be the house once you install that one obtrusive so here you can see that one that in the wave convent in the wave country this one this honor on obtrusive JavaScript enable is equal to true so we have to make this one as a false so go to that your esteem and here you can write like HTML helper dot one obtrusive JavaScript this one make it as a false which is this one make false okay open that layout and this one you have to make to put it down here just add that one class the first grant application just go to the Google over the application now if you will place the register let's see see you're creating that error message username is you can email is required password is required and confirm password is okay that's we are going to use that one class this time so type go to your CSS and here simple I am going to write like a dot error class so this one that color I am going to make as a read alright just we can it save it add it load again just befell place the register see you're getting that error message and that your cursor is also red once you believe that so once it will be clear that one that editor is wrong if you will right lag in something so you can see that it's a mentioned attack in Turkey will interval it email address so if you were going to write like a valid email address so this one also it will be making it once you have Eric we're getting that error so it will that will will be that at color that font layer will be trained so here the one if I mentioned he'd mentioned at a minimum length of a password this is six so just mentioned that assists this one we had need to change that one I think this one is a text box for so once you are going to this one and see here password is the password for that see in this one also confirm password for the save it and reload again if you reload okay once you press that one so just once you believe that same times it will you will link that hello see two three four five six so this is Gandhi's see it's been saying that password and confirm password should be same that's Internet so before you math then that that have gone cookie now you can set this one you can change with that once you are going to use the data annotation because here you are using the HTML helper so once you are going to use the data annotation to see open that your view model here call that your data notation that is a using system dot component model dot beta noticin so just change the name display that name so here I am going to guide like a user name same like another this one for email okay this one from password this one for password the same fun for I'm going to add for confirm password so right here comfort possible not on the application you will see that this name will be displayed here in the web browser okay see this username email password other things now validation is done from that mindset that the plots are sided it's doing that validations I hope it's a clear thanks for watching just review one times what we have done he have installed that and go to the manage NuGet package manager there we have installed that one obtrusive and that in the layout we have added that to that a script file this one that were I did not mean dot GS and we're dead gone about mean dot jeaious and in the index we never added that one that particular your same things we are doing for EM for EM we'll see validation also same we have added here that your text box and that with the help of HTML helper and then in that script add in this rip test we have added the first one is that rules which what all that rules we are going to write just like here we have mention that say username is required so mention that username and quite a little bit true if email that you mentioned that CA you will see that one email also true and slide that particular this one is that your properties this one it's your properties and this one is your actually you can say that is the rule just required is the true that email is a true and required is Felicia a minimum that is six same thing we are doing in that once that server-side validation and same thing we are doing just like here we have for that for this particular that username is so what we will do that when we can rewrite leg eloquent seem like we're doing that okay required this one for a devices here and up here I did the terror versus I clear this one that a user name is required that is your server side validation same for email also we can write like it here email email is required so email is required and I've seen for if I want to write a password the same your password is required okay this one your password is it a can see that come from Cynthia doing that this is required this one we have make that true so once you this one if you required so you can see that is required and next one is that message this one is your message for required that particular error message okay this one is actually here after that email so this particular email should be P only they can write email ugly so same for the event we can write like it email address and that one here that is the error versus inter valid email address it seems so simple just write that email address that same its email here this one is even we have make that true and that one that particular error message here we L mention that under the messages that is your error message the next one if you see that one that is a minimum length password so 2p6 so in here also in that password we can write like is here that invite like a mean length then he can write like a land this one will be the six a next one with the error message minimum length just simple copy that this one minimum length or password is six just this is him okay this is him and for that one there to confirm password is here so we can write likely compare so that one is one compare attributes so property properties that your password same we can pencil and here that one looking like that error message so this one this particular error message that confirm password password and confirm password should be seen so it's just nice when that error message here okay that is the same same thing we have to done in for that in that client side also like one is there rules second one is the message we can add there more properties just like that class and took that class particular element where you have fun to add that that particular masses so all those things but we mainly thing is that your rules and second one is your messages so here in that that register view viewmodel also he are doing that or particularly if you'll say that this one you can say that when a particular rule this one is a rule and this one is your error message same thing I hope it's a clear thanks for watching

Channel: Tek Tuition

Views: 2,759

Keywords: JQuery Form Validation, Client Side Validation, client side validation in mvc 5 using jquery, mvc jquery validation client side, mvc jquery validation before submit, mvc form validation, jquery unobtrusive validation example, registration form in mvc with jquery validation, mvc form validation example, jquery unobtrusive validation mvc

Id: 1uc2y2GJC_s

Length: 24min 15sec (1455 seconds)

Published: Thu Sep 12 2019