Client side validation using JQuery in MVC

hello everyone in this video we are going to learn about client-side validation using jQuery in asp.net MVC before we are 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 so what is actually the client-side form where Edison this type of form validation is done at the browser level that is handling simple constraint validation client-side where form validation also helps in providing better user interactivity with the website while develop verification or validation of input his being done at his server side let's create one controller the right click on a controller had controllers just give the name with the name of whom the home controller is added now right click on index add view that is now you can see that view is added now first of all that I create a folder that is your view model so if your model is already here right click on 'view model add one class that is your imply remodel are going to add some properties that is your your name email and next one is that your salary okay so in the index I am going to call this particular apply view model okay this one is done now I'm going to create one form tab and give the name that is your PMP form so inside that EMP forms you to write the code residual deal that your container this is your container but inside that container going to write that that class little bit the room there another one your class that is your forum group so farm grow faster will be that your name okay then it will be the HTML dot text box for the modern model dot your first one is your name then new that attributes test says there is no same I am going to copy for this one for email this one for sells it he are going to write like your email and then every so here you can write yourself a email now I'm going to write that your clients head port after that we can add that one button that is your input time that is your button the mean to say value it will be also see if go to the tonight ID that is your butter save now write that your client side validation first of all to use that will script file jQuery artillery projectory mean gorgeous now we are going to write script tag that type will be your JavaScript right here and right right here dollar don't already function we are going to write create the function well it is a form so there is a one way to validate this one first of all that one your name so how you will validate to make a a deselect refers to making if that your ID selector so try the selector torque value if is equal to the to plank okay this one then you have then hit that alert you can write like a imply they should not be empty something like that we will write and you make the written forms same like other you will do also but first time we're going to add for one just like that okay if is your values of name of the value will be empty then you will get that one alert message and it will return it will run the application well here one more thing because it's not once you are going to click the button so we have to write code for button click just to open that you'll button to save so it should be in button click so right here dollar your ID selector short clip in your function your validate form liberated from not real order here okay once you're going to click that save shift that but I see of dot please suit me that save you save beautiful so now you see we are getting that one error message but it said not a good practice because once you will you will have there so much that takes box just like if you are going to create that your job website in that job website you will find that when there is you so much filled if you will use that where I did with this will way that it will take too much time also and this this will be not efficient also and your code will be so large so hanger will do just stop the debugging there is a one that case there is a unobtrusive just right-click at that package managed to get package browser here you can write like a non-obtrusive just install this one but click on I accept not so finis okay so in that if we will look in it just close this one if we look in a jQuery script folder you will see that one is a validate and one is that valid dot an obtrusive so just this these two need to add reference into to your layout page you want you can add it here ok first one I am going to add that validate and another one easier or not to see just add this to reference this to refresh has been added now we'll open that employee model here I am going to add a namespace that is a using system dot component model dot data notations we will have here now we can write here that you're not display since I required the first not an error message Harold messes with video and flyer name is required whatever message you want to give in the client side we can write same like for anything email if you like like a email is required and other one your salary salary is also required and I open that index.html here repto write like a your validation HTML dot where it is in message for your model model dot name and this will not will be the text answer so it will be there your form control this one will be that which changes your first just copy your ad ad for another - just for email and your Jersey the one for email I want for yourself and this will need to chain form control okay so here you have added that one if it's check that you are checking that empty but just remove delete this one this one is not required because it will be there too much lengthy so far your form tab if your ID selector your dollar to write like $8.00 dot valid okay if it will be not valid then it will be returned forms that's all now everything is done just open that your model is check your email is required and one more thing need to take because we have copied that one so here it will be your email and this one will be your assembly now if you'll run the application they'll just I have mentioned just one small code because there previously we are using for every text box if you are checking that one that name text box is empty that so if we will write more condition to validate so you have to write that all now it will run the application just click on save as you can see you're getting that error message just to if you are going to write something just it's the same type cheaper by default it's saying that it should be that your decimal you should write like that now if it's that valid for email just stop I'm going to right now if you that you're employed be modern now when to change with your email address that valid email address so I'm going to like to get other type so make a data type dot email address now going to write that email error message in a dress now to run that okay just click on save I don't see that one you will get either method you write something here this one if you are writing something and try to click see if the salary so varied immunized directors also should come don't I get like an email address and here you go right like an idol message you enter this is not invalid that's all this one for your valid email address if you're not writing your valid so you will get that this error message not on the application first I'm going to enter the name suggest into the knee okay now I'm going to change right like the email address see here enter the milettis is not valid if I'm going to write like a valid email address so you know that error is fun - enter that one now everything is okay this one now you're not getting any error message in this tutorial you have learned that how to validate that your field that form fields using jQuery just things three things you need to do for that client side validation first one you have to install that con obtrusive second thing you have to add these two difference these two will validate our very dead taut on obtrusive and third one once you are going to click so you have to add that your form thing there checking here you can check that one your valid it's that your form is valid or not I hope it's a clear thanks for watching

Channel: Tek Tuition

Views: 13,211

Keywords: Client side validation using JQuery in Asp.net MVC, client side validation in mvc using javascript, jquery validation in mvc 5, mvc jquery validation before submit, jquery unobtrusive validation mvc, mvc form validation, client side validation in mvc using dataannotations, mvc client side validation not working, mvc textbox validation without model, Tek Tuition

Id: yXJq0byD9w0

Length: 17min 7sec (1027 seconds)

Published: Wed Aug 28 2019