Client-side vs Server-side validation | Spring MVC Form Validation | Hibernate Validator | JSR 380

[Music] okay so hello and welcome back my name is Avinash and you are watching selenium Express and today we are going to start with a new concept called spring and with the form validation this is not a spring MVC concept if you even if you are working with spring but even if you are working with any web application in Java the same concept you need to implement there also so the form validation is a really really important concept that's because in any web application will have form and we need to validate our form correct so even if you are working with a spring MVC application or a spring good web application this particular concept matters a lot so that's why the validation plays a really vital role whenever it comes to the real-time application that's because the company that you are working with has a different different criteria and we should know that how to implement all those things right here in our application okay one more thing this topic is really really important for the interview purpose you know the region right we are using this concept very much in a real-time application so obviously in the interview also they are going to ask you a lot of question from this topic okay so before we go ahead this is the content that I am going to cover in this particular video first I am going to give you the introduction to this topic then I will tell you why we need the server-side validation with a real-time example if you feel you already know about it you can skip this section once we complete that we will understand what do you mean by jsr and JCP and once we understand that I'm going to give you an introduction to the bean validation API once we are done with that we are going to do a lot of hands-on with the bean validation and at last we are going to design the torment condition check box for our homepage and we will restrict the user if he is not checking the torment condition check box okay so this is gonna be my foundation tutorial on the form validation in the next video we are going to understand a lot of arvind stuff but I think the foundation is important so feel free to skip any section that you already know and you'll get a video map to all this topic in the description below so I will just give you a quick introduction to this topic right now and after that I'll just dive you through this topic step by step and we are going to start everything from scratch so be with me till the end of this video and I am going to start everything from scratch before that there is a quick introduction to this topic ok so right now let's imagine that this is your computer and this is me sitting with my computer and you have created a website let's say using spring MVC or spring boot and do you have deployed their website in Tomcat right now you asked me now let's say I'm the user and you ask me that hey could you please connect to my website then I said obviously but could you please give me your URL also you have shared the IP address of your computer and the port number and the website name so I just send a request to your website and I got a form back in return so now let's say I got this form when I did bring to your website so now the first question if I'm going to ask you that how you have created this particular form then simply the answer will be you'd abused HTML CSS and JavaScript so I got this form and you have build this form using HTML CSS JavaScript which are called the client-side programming languages so the first question will be why I'm calling these languages are client-side this is client-side that's because I am the client the user is the client right or you can say the web browser is your client so the web browser is going to invoke all these languages and it can run the screep and can load this particular form in your computer screen so that's why we call the web browsers just like Mozilla Firefox or the Google Chrome as the client right right now let's imagine that the client has entered the username and the email address and he did enter the submit button now what will happen now obviously we understand about the query string in the last episode so we will get the coolest ring as name equal to Aviles email equal to whatever the user entered is a core string and obviously the client will send these things to the server side or to the back end of this application now inside the backend or inside the server you have written code to handle this particular URL or the chorus train so you have written code in Java let's say and Java is a server-side programming language so the next thing will be you are going to handle this Cory string or you are going to handle this URL and you are going to convert this entries to a Java object just like name equal to village and email equal to a velocity a gmail.com and once you converted the URL to it's about set we are going to say in this object to the database and you are going to set this object inside the database isn't it so now the interesting thing is before you are going to save this object inside the database you have to validate the data that you have captured from the URL are these data's are valid just have a look here dynamic aldo villas air starts with a small letter what if I have a business rule what if if I have a business criteria which says that hey do not enter any name which starts from a lowercase what if I have a business criteria we say is that hey do not receive any Gmail domain URL we will only accept the URL ending with at selenium express.com so obviously at that time we should not store this object inside your database we should not persist this particular object isn't it we need to validate this particular object we need to validate this particular beam the beans are also called as objects and the objects are created from classes which class I am talking about right here so if we have watched my last episode you would have surely understand this particular concept so this is my form and the back end of this particular form the way that I am storing the user's data entered inside this text boxes by creating a DTO class so basically whatever the user is entering right here and storing those data or a mapping those data or am binding those data inside this DTO properties isn't it so the question is before I map the user enter data inside my dto class properties I need to make sure whether the data have elite whether the name that user entering is a valid name whether the email entered by the user is a valid email and if the user entered data's are not very then I need to tell the user that hey you cannot submit this particular form because the name that you have entered is invalid because the email that you have entered is invalid please enter a valid email correct and this is what we call a form validation okay so we are validating the form so we are calling it a form validation and if you see the previous slide here so here we are validating this class or here we are validating this beam right so before the beam before the object is going to get stored in a database or before we do some work with the beam we need to validate the beam and we have to make sure that the user enter data are correct right so that's why we need to define the validation constraint for this particular properties and we call it a beam validation cool so right now here is the question we know CSS HTML and JavaScript these are the client-side programming languages and JSP servlet server these are the server-side programming languages and I'm damn sure that if you have a little bit of understanding with HTML and JavaScript then you must be knowing that we can do the form validation inside the client side ourselves it's not a big deal so right now the question is why we need to perform the bean validation or the form validation inside the server side it's a valid question isn't it so if we can do validation in the client side easily then why we need the server side validation and that's what is coming next but before that let me give you a quick walk through that why we need the server side validation and what will happen if we only rely on the client side validation was the real time problem that we are going to have let's have a deep dive [Music] you okay so right now let's see what is the problem that we are going to have if we only depends on the client-side validation I'm not saying that client-side validation is bad but I'm going to tell you right here that what is the problem that we are going to have if we're going to use the client-side validation okay so always remember that we need the client-side validation and the server-side validation together we need to have the client-side validation in our front-end code we also need to have the server-side validation code in our server-side okay so right now let's only do some client-side validation in our front-end code and let's see what is the problem that we are going to face if we are only going to rely on the client-side validation so right now let me go to my application okay so this is our love calculator homepage and in this application we have your name and crush name a label and text boxes right here okay so for now let me delete this default values I don't need it right now I was just having it right here just because I was teaching your data binding but right now I know you guys are pretty good in data binding so let me remove this particular things so we're from these values are coming first of all now probably I have initialized their properties inside the DTO that this particular page is using so this is my home page right so who is actually loading my home page so if I'll go to source main Java I'll go to the controllers and I'll go to the LC app controller right here so here we can see this is my last request mapping so if you can see here in this particular page we have the slash mapping right here so this is actually the method which is getting called and you can see this is actually calling my home page so if I'll do command Syd are right here I can go to my home base right so this is the pace that we are seeing right here so right now what I can do here I can go to my LC app controller and this is actually the DTO objected I'm trying to create before I load my home page and I am so sending this DT or object to my home page so during the object creation whatever the value this particular DTO is containing that particular values are going to my home page and by default and getting those values while this particular home page is getting loaded so what I'll do right now I'll go to my user info DT oh and here is my username and crush name mr. X and mr. Y these values are getting loaded right here so let me simply remove these values right now I do not need it because we are done with the data binding concept and I know you were pretty much our about it cool so right now if you can see my changes are getting reloaded right here so it's completed right now so right now if I'm going to refresh this particular page this values are disappear right okay so right now what I need to do here is in this home page I'm going to have some validation for the your name textbox and for the cross name textbox as well so first of all let's say I want to have some validation rule for my your name textbox okay so what is the validation rule that I want to apply to my your name and the crush name textbox let's say right now if I am giving some value for my year name let's say Sheldon and Amy right here and I'm hitting calculate things should work fine and I'm getting username and Sheldon and crush name is Amy but right now if I will not provide any value right here if I delete it and if I delete it and if I'm going to calculate still I'm moving to the next space in the sewing my user name is blank and the crush name is blank because I have not entered anything right here so what is the thing that I want to do right now I want to restrict the user if this text boxes are empty and if somebody is hitting calculate I want to give them some validation error without moving them to the next page okay so first of all let's say I do not know Spring Framework I only know HTML CSS and I know a little bit of JavaScript I know that you guys should have some kind of knowledge as HTML CSS and JavaScript it doesn't matter that you are a full-stack developer or not we should know the basics of it so if I go to the love calculator home page which is this one home page dot JSP okay so for now if you see here this P tag and P tag inside that we have a label called your name and inside that we have a form input right what is this type equal to text doing here it's not needed let me remove it and let me remove it for the crush name also for the form input tag and we do not need a tight because form input does mean that we are actually needing a text field okay cool so right now we have a surname and the crush name field right here let's say for now I want to have a validation for the your name textbox so I wonder if a validation for this and what I want here that if my surname is empty if the EUR name is blank let's say if there is not at least one character is there inside this particular text box then we will restrict the user to submit the form and we will give him some validation error that hey this particular field this particular text box is needed you cannot leave it blank and you have to enter at least one character for this particular text box so the way that I'm going to achieve this right here without using the spring MVC without coding anything in Java by using some JavaScript I'm going to show you something right here let me minimize this okay and let me open up a browser let me and drag this to here and let me here the same URL let me copy this URL and let me paste this URL doe go and I get my page right here so less there you can see this is my form my forms ends here and my form starts here right this is my form and inside this particular form I do have two text boxes in one submit button so here if I can do something like this let's say I will use the attribute called on submit and if I give the value 4 on submit is false see what is going to happen if I am going to enter something right here into something right here and do calculate ok it's moving to the next page no problem so what I can do here I can write here written force command s now let me refresh this particular page and let me enter something right here into something right here and don't calculate ok steel is going to the next base because I have a typo here so let me call it the typo let me write false if I'm going to enter some data right here if I'm going to enter some data right here if I do calculate now see I am not moving to the next place if this onsubmit is returning me a false attribute I am NOT able to submit the form correct and if this value will be true let me do command s and let me refresh this particular pace and to something and to something right here and do calculate unable to move to the next place so I have to write a JavaScript function which is going to return either a true or a false ready right so I have to write a function here let's say validate username so the intention over here is that I'm going to write a JavaScript function called validate username and that particular function is going to read the user input from this particular box and going to tell me that whether there is some input provided by the user or not if the input has been provided by the user and this particular box is not empty and let's say if there is at least one character entered by the user for this box then I am going to allow the user to go to the next form when he hit calculate when he submits the particular form okay so now let me write a function here called validate username let me copy this now let me go to the head tag so here my head start here my head end so I'll do one thing after the title let me give some height spaces and I'll do what here I'll write script because I want to write a JavaScript function doesn't matter you know JavaScript or not doesn't matter I'm going to write a very simple JavaScript function here and it's not needed if you understand it is fine if you don't understand it that's also fine but I am damn sure that you are going to understand it right it's pretty simple man you are coding in Java and you are not going to understand JavaScript how is that possible you know what language means you know all the language there's how I think all our syntax right so what I'm going to do here I'm going to create a function so this is going to be my function name right validate username as we have seen right there valid ID username and I'm going to use a keyword here called function so this is a JavaScript way to create a function I'm going to open and close the parentheses and I am going to have a color brace cool so right now my intention here is that from the user name I'm going to face the data first I'm going to face the data what is been enter right here in this box and then I am going to validate it so how to face the data from this particular text box okay let me go to my google chrome right here I have told you already about the developer tool so I'll click on the developer tools here so let's say this is my home page right now I'll go to the console right here so let's say I have some value here inside the your name text box let's say for balázs and what I'm going to do here I will write something called document okay dot get element by ID so what is the element ID further your name text box if you forget it click on the elements tab right here click on this little arrow mark right here and go to that particular field and click here now you can see the ID for the username or the your name textbox is y n right so I'm going to copy this I'd a command C I'm going to the console tab and I'm going to do what I am going to put here command V right so document dot get element by ID and let me hit enter here ok so observe the output right here so we get the complete HTML for the your name textbox so right now I do not want the HTML I want the value from it so I'll write document again and I'll write get element by ID and I'll provide the ID in my case this is why and I will do dot and I'll write value here now let's see what I'm getting here so I'm getting Avila's what I have entered here correct now let's say I want to write of the last dot panic rahi so let me run the same command right here again and let's check that I am getting whatever I have entered here or not so I'll write enter and the recall of the last rate money guy if you're writing anything right here and if I went to run the JavaScript command we are going to get the same value whatever you have entered in the textbox so I want these line of code and that's it so I will go back to my STS and the function that I'm trying to create here where is that validate username so here I'm going to paste that line of code okay and I'm going to store that particular value whatever the value I'm getting by this particular line I'm going to store it with a variable called user name or your name whatever you want to write doesn't matter and how to declare a variable in JavaScript by using the VAR keyword okay and that's it you get your user name now tell me I want to check whether the user name is greater than one character or not and for that what you will do it in Java how you're going to find out that how many characters are there inside this particular string obviously you are going to use length function right and here also I'm going to use something similar user name which is my value whatever I am getting from this then dot length cool so this is actually going to give me the length of the username so what I can do here I can put this inside a if clause and I'll wrap this off with a parenthesis I'll open and close this and I'll say here let us say if the length is lesser than two character or one character okay let me say if the length is lesser than two then let me return false here right you know right if I'm returning false this onsubmit method will be also returning false if it is returning false the user will not be able to hit the calculate button I mean if he is hitting the calculate button he will not be allowed to go to the next page so I'll be returning false here else I will return true here that's it you are done okay so now let's say if the username is less than two character I'm going to have it alert here list it a lot your name field or your name should have at least one characters okay let me do command s so now let me do what let me go to my Google Chrome and let me go back let me refresh this particular page so that it will be reloaded and right now let's say I'm not filling in any details for the username and let's say I'm hitting something for the crush name and I'm doing calculate see what I got here your name should have at least one character so if you are not filling in this your name we are getting a validation here right that hey you should have one character right you cannot leave it blank let's say I have I'm giving here one character and to calculate and still it's saying we should have at least one character that's because probably I made it to let's say 1 ok let me do command s right here again and let me refresh the page so let me provide one character to this and let me say for the cross name is something I will do calculate and I am able to move to the next page so here my validation is successful so if I'm not giving at least one character to this your name field and if I'm hitting calculate I'm getting a validation here that hey you cannot make it blank and this is JavaScript right this is a client-side validation so now you may question me ok if the client-side validation is working good with JavaScript then why we need is for the side validation correct but I told you previously we need both client side and the server side validation only client-side validation is not enough now the absolute question from you is right now why so is working good I am my JavaScript is working good so right now I'm going to show you some funny thing right here so as a developer if you know some kind of web designing you can actually edit the HTML on the fly right it can change the HTML that I have written for this particular piece and also you can tell your browser let's say I'm using Google Chrome right now you can tell my google chrome that hey do not run the JavaScript did not allow this height to run the JavaScript at that time what is going to happen that time my validation that I have written in JavaScript will not work at the time you need something you need some kind of validation in your server-side code okay I'll show you how okay now now let's see here if I'm entering at least one character right here you know I'm able to go to the next phase if I'm not entering anything I am getting a validation error cool now let me break it okay so what I'm going to do here I'll go to the elements section here and I'll find the element for the euro name Xbox and see here we are capturing the thing we're capturing the data from the euro name is by using the ID right so if you see in my STS I'm using document dot get element by ID correct right now if how me to remove this ID let let me you know delete this idea from here and I'll enter so right now actually I have edited my HTML on the fly okay now see what is going to happen I'm not providing anything right here I'm providing my cross name calculate and boom I'm able to go to the next place so here my validation break I because I have just edited my HTML code on the fly okay I have just removed the ID so right now if will not write any kind of any decent code in your Sabu site this is going to be a absolute disaster and of course your business logic will break or there might be there is a another question from you what about if the user is not smart if the user cannot edit the HTML code just like you did then the user simply can go to the console tab they can click on the setting javascript can attack here no okay so let me go to the console and I think here we can we can yeah there you go Ron command right he can click here and he can click JavaScript here and can you see here disable JavaScript so he found them to disable the JavaScript then my browser will not allow the site to run the JavaScript court you want to see how so see right now I have disabled it right so I'll go to the command again and I'll say JavaScript you can see my JavaScript is already visible right I can see is enable JavaScript is saying because I have clicked on disabled previously so right now let me go ahead and rephrase this particular page or two or three times I'll go to the elements section okay and you can see right now I have not edited anything my user name has a ID called yn that's cool right now I will not provide anything for my ear name and for the crush name let's say I'm going to provide something some random value and I will go calculate and there you go you are able to move to the next space so my invalidation did work because I have turned off the validation for my my browser right so my browser is stopping the JavaScript to run so this kind of logic will not work in production so at that time your business logic will break so we need something right here so we need some kind of support right here to do the validation in the server side and that's where the pin validation of the spring MVC form validation will help us to do some magic in our server-side code so that if the things will be breaking right here doesn't matter in my java code also I can handle it right so this crosshair verse is going to serve our business logic that's gonna save us as a developer and this one serve our company okay [Music] [Music] okay so the better way that we get from all this session is it is pretty important to do server side and the client side validation at a time right so if our clients hand validation fails we can do something in our server side I mean we can do the same variation in the server side to save ourselves from a production block and for this we have a great great feature the spin providers is called being validation you okay so right now you understood why the server-side validation is important correct and now you are kind of interested to do some server-side validation and you want to know that how to do the server-side validation and obviously to do the surface and validation we need some kind of API and for that Java provides a Java beam validation API and there are different persons available of that the latest version of the Java bean validation API is the 2.0 or we also call it the jsr three eight zero so the different versions of the tracer which is available for the bean validation API are the JSF 303 the jsr 3 4 9 and the jsr 3 8 0 now a obvious question that you will get that what do you mean by the jsr okay so the jsr just this first of all this thing the J's are just like a person okay to say this at 303 a whatever person the end of J's are 3 4 9 and then the J's are 3 8 0 okay so now let's understand what do you mean by AJ sir so they said Jason stands for Java specification request okay so now let's imagine that you are a Java developer and you have kind of working in Java language for last few years and you find that there are still some gap in this particular technology and you can actually improve it right so for that you can pilot jsr you can you can convert your ideas or thought to a specification what we call it say Assad and you can find that this are in a community called JCP so once you file a JSON that jsr will be reviewed by the community people called JCP so there is a community actually called JCP java community process so first of all to finalize a star you have to be a member of the Community College ACP as I said and once you be a member you file as JSR and then your jsr will be reviewed by your community people or the DCP community people and then it will be go to the PMO so PMO is there another organization that controls the JCP okay so PMO actually organized by the Oracle and the PMO takes the responsibility for the JCP so JCP is the team or the community they continuously work for the betterment or the improvement of the java programming languages so once you file the jsr and the review has completed and PMO also accepted your taste jsr then actually whatever the thoughts that you have given whatever the api you wanted to include in java programming languages those thing will be released in the next version of the Java so this this is a very beautiful thing isn't it so anybody can say our thoughts anybody can share ideas and for that only the thing that you need to do you need to be registered with the JCP team so you can do that by visiting the JCP dot org website and one should be a member of that you can share your ideas thoughts to make the Java a better programming language right and jsr is nothing is just some kind of specification okay and once the specification is accepted this there's audit to the next person of the Java so right now we have kind of nine hundred plus the stars are available and for the bean validation we have three different jsr as I said J's are through you three.js are 349 and descent little Jessa three eight zero has released in 2017 or something so first of all the bean validation API so the jsr 303 also called it the bean validation 1.0 version that's came in with the Java EE 6 person and then the Jessa 349 came in the Java EE 7 version and then recently jsr a380 has been released in 2017 and the Spring Framework 5.0 + series supports the jsr 3 8 0 so that's the latest one and three eight zero is the genocide that we are going to use in our video right now ok so right now one last thing that I want to talk about the case at ease if you are talking about the case at 303 all the feature of the jsr 303 are there in the jsr 349 and all the features of the jsr 3 4 9 are there in the JS r 3 8 0 so this is backward compatible so no worries with that so right now we are using the spring PI point 2 percent so the best suitable jsr right now we can use ease other jsr 3 4 9 all the J's are 3 8 0 and obviously we are going to use the hibernate validator so now you must be asking me why we need the hibernate validator so guys as I said the j-stars are the specification they are some kind of interfaces right so there are a few company who are actually giving the implementation to those j-stars or they're giving the implementation to those specification so hibernate meditators are really popular so there are different companies like Apache b-ball hibernate and the spring framework itself has their own implementation to the jasa 303 3 4 9 or the 3 8 0 so in this course we are going to use the hibernate 6.0 series remember that if you are using the hibernate 6.0 version then make sure that your jdk that you are using that is Java 8 plus and you are using the spring framework PI point war series right I think it supports 5 point 2 plus series probably ok but try with the pipe on 0 also I'm not sure about it ok right now this is all the story that I want you to tell you but this is the time to implement all this thing that we have learnt right now and let us understand how to do the server-side validation using the bean validation API or by using the hibernate validator 6.0 series which is the implementation to the Jayce a380 or the bean validation 2.0 API okay so let's get into it okay so right now let's do some server-side validation now my requirement is same but instead of doing validation in my client side I'm going to do it in my server-side code okay so for an example right now whatever we have done so far if I'm not entering anything right here for the your name text field I'm getting a validation error and that's from my client end so for a moment right now let me remove it and I'm going to use it later so I'm going to go to my SRC main web app and I'll go to web honest view I'll go to my home page dot JSP so here this particular function I'm not going to remove it this is my JavaScript function but where I'm actually calling this function if I'm going to hit command K here then as you can see I am calling this particular function in my on submit method so for timing let me remove this on submit method and obviously I'm going to use it later but for now I'm going to remove my client side validation okay command is to serve everything if I'll go back to my application let's do okay here let me refresh this particular page and right now if I'll do calculate I should be able to go to the next page because I have removed the validation so let me go back and let me do some server-side validation for this particular field called your name so to do the server-side validation as I said first of all I need the Java validation API so as I said you before we have two different person of Java bean validation API one is three zero three one is three four nine now let's use the latest one which is they sell three four nine and if I'm gonna hit enter as you can see this is a 349 belongs to the bean validation and the bean validation dot-org is actually the you know site which is hosting this particular you know specification for for now actually I'm not going to use the normal job here but I'm going to look for Jessa three four nine mavin dependency let's see what's going to come out of this okay so Java extra validation 1.0.0 I think there is a latest person available for this yes there's two point zero point one final let me go for it this particular version and as you can see the group IDs Java X dot validation and the artifact IDs validation API so let me copy this artifact and let me go back to my form dot XML and I'm going to paste it right here I'll go all the way to down and I'm going to add one more dependency right here after mine say steel I'm going to do a command shift F to format everything and this line I'm going to simply delete it because I don't like to see these things I want to see my core clean and fine okay so let me do ctrl s and is building my workspace but to be in a safer side as I have updated my form I'll go to the mavin and I am going to update my mammal project okay it's done right now so straightaway right now I'm going to close this particular file and as I said I'm going to do some server-side validation I'm going to do some validation for your name text so if you remember for this particular phase we are using editio right and actually we are doing the data binding with that DTO or with that beam so let me go to that beam beam in simply a class so they said first of all who is loading our home base I'll go to the LC up controller and this is the method which is basically in our loading our homepage that I told you previously it is mapped with his last request mapping okay so right now before loading the home page we are creating the user in for DT or let me go to the user in for DT or right now and this user name property right here is actually getting binded with the data what I am entering right here so the first thing here is that I'm going to use some validation so what kind of validation I want to use right here first of all let me use a at not blank right here so you can see here I am getting not blank not empty not not all these annotations are from the java extras validation that constraints for now I'm going to use not blank annotation just to make sure that this particular user name will never be blank if somebody is entering nothing right here in this text box and hitting calculate he should get a validation error and what kind of validation error he will get let me put a message for this okay so I'll try it control space and I'll click on message right here and I'll write user name let me give a star here let me say star user name cannot be blank correct cool so this is going to be my validation message which I want to be popped off right after the yer name if the your name textbox left blank during the time of the form submission so I will go back to my DT or so right now as I have the validation with this username how can i trigger this validation okay so whenever the user is going to fill in all this form okay and he'll do calculate the data binding will happen okay and where actually the data binding is happening so if I go to the LC app controller so this one is loading my home page and whenever I'm filling in all the data and whenever I'm hitting calculate this particular method is actually helping us processing those data that I have entered here and moving us to the next page which is resolved page right now here actually we are capturing the data from the URL binding it with the user info DT or okay and sending those data to my result page and my result page itself I'm accessing those data by using this model attribute right now here actually we are doing the data binding right whatever the data we have entered we are binding it with user info DT so once the data binding is done I want my validation to get triggered and to do that I'm going to use a notation here called a valid and as you can see the ad valid annotation is coming from Java X dot validation so Alto enter and I'll give a space I'm going to repeat it again it valid annotation is going to help us to trigger the validation for this beam this beam is user inferred eto right so once the data binding is done we are going to test our fulfilled whether it is meeting the validation criteria or it is not meeting the validation criteria so for now let's say our validation criteria is username cannot be blank okay and obviously if this your name textbox is blank once the data binding done here correct if I will go to the user info DTO there will be nothing here inside the user name property because the user has not entered anything and as I said previously we are not allowing that by putting this annotation so if I'll go back if the validation fails here the add value will validate and whatever the validation result which is coming I'm going to store that result using binding ritual property right so you can see binding you resort is a class available in altar Spring Framework validation so I'm gonna hit that class and I'm going to let's give it a reference let's say result so ice pretty straightforward ed valid will trigger the validation okay and whatever the validation result will come okay that result is going to be stored here so for now let's say I'm going to say here if if there is any error right so I'll say result dot health errors right so this heads on our method basically gonna tell us that whether our form has any error or our form has submitted successfully if the form has not submitted successfully if this form has any error then those error will be stored here inside the result and I'm gonna get what are the errors that I have right here I will actually face the error later for now let me have a simple sis and let me say here a mine form has errors just to check whether my things are working fine or not right now here two things you have to remember always remember that this at valid annotation should be there before model attribute okay what about the DTO you want to validate before that DT only you play stop at valid annotation and the next thing is this binding result should be after the DTO so just after your dt or reference you place the binding result otherwise it won't work otherwise your bean validation won't happen properly so you have to make sure that the binding results should come after the user in for DT or initialization okay cool so right now we're just trying to see that if has errors this is basically going to return as true or false you can see is the boolean is returning if it is true then this block will be executed and we're just printing something mind form has errors okay so let's check whether it's working or not command s okay so let me wait till my server reload my changes initializing dispatcher and is completed cool so now let me go to my form let me refresh my form and I will not enter anything for the euro name I'll just leave it blank and for the crush name let me give some gamma value here and let me go calculate and what is this I am able to move to the next place but I am actually doing everything right I have a not blank annotation right here before my DTO property I have also triggered the validation by using the add validation and also I'm making sure that there is binding result just after my DT or and my form has some error right now so what I was expecting that as I have submitted this particular form without filling in the year name so it has some error so if it has the my form has error should be there in my console so why it is not there and why my form has been submitted even without the validation fells that's because I told you previously here if you see not formed or XML we have just given the specification okay we have just given the dependency for Java X validation this is just the specification we also need to include the implementation for this specification correct for this bean validation API as I said we have different types of providers like we have hibernate validator we have a passive eval and also we have spring frameworks own validation API so right now as I said I'm going to use the one which is very popular and that's the one is called hibernate validator so I'm going to search here hibernate validator we have n dependency okay so I got worked at hibernate hibernate validator Marvin repository I'll go here and I'm going to go for this latest version of the hibernate validator which is 6.1 I'm going to copy this and I'll go back to my form and right here I'm going to add one more dependency okay let me format this and let me remove this line I do command S & L wait till my build is completed okay cool so things are working good right now so one thing I will tell you here is that this hibernate 6.11 one person it basically has all the features of bean validation 2.0.1 api right so we'll get all the latest feature right here but make sure that to use the hibernate six point one point one you should have at least Java 8 version otherwise it won't work ok cool so right now I'll do nothing my thumb has been updated I'm going to close this I'll just do a maven install for one time just to make sure there is no compilation error so my own install and I'll wait till my build is success cool I'm building success right now okay so right now again I can hit my URL and can see whether my validation triggers this time whether I will get my form has error in my console or not so I'll go back to my Google Chrome I'll go back to my home page and I will not fill in anything right here for my your name and I'll hit calculate cool it will go to the next fail because I have not written any kind of logic for that but I'll go back here and see the sweep line right here this is going to give you a lot of happiness my form has errors right now as I have submitted this particular form without giving anything right here for this box so what is actually happening is my validation is getting triggered because of this add valid annotation and whatever the validation errors that I have I got that errors in my result reference and right now whenever I'm checking my result has error or not this particular function has error returns true and I'm getting this in my console cool so right now what I want if my form has errors right I will not allow the user to go to the next place if he will do calculate I will not allow him to go here instead what I will do here I will show him the home page again I'll show him this particular page again so to achieve that I'll go back and here in this particular method inside my ifs Clause I do one thing if my form has any error written the home page and do not allow the user to go to the result page so I'll do copy this copy paste here cool so if there will be any validation error so the user home page itself and if this if block will not execute that means I do not have any form validation error then show the user result paste let me do a command S so that my changes will be deployed to my server and I can test this application again to check whether my things are working as expected or not cool so my changes has been deployed to my server and also he can track this line here in the console right hibernate validator six point one point one is there is already there in your class path so we have found it and that's the lock which confirms that we are actually using the hibernate validator which is going to do the job for the validation the bean validation right cool pretty nice so I'll go back to my Google Chrome right now I will replace this particular pace right now I'm going to fill in anything for my your name let me give some random value for the crush name and I will hit calculate and you can see something is happening it is not allowing us to go to the next page right now because our meditation is getting held okay and if I go back to the console you can see there are so many times my form has error my form as error this particular line is getting printed to the console as many times I'm trying to submit the form you want to check this out clear a console go back here calculate now you can see my form has errors right this particular line is getting printed and after that I'm actually returning my home page and that's why the user is seeing this space not the next phase is the validation fails okay so what actually the form error that I have configured with my dto that is username cannot be blank okay so when my form validation fails here I actually want to print that particular error to my console so if my result has actually has any kind of form errors I can also paste those errors from this result object right so what I can do here if the result has errors right I can confirm that okay if this EEB locks is getting executed then my result has actually errors so right now let me get rid of this line so let me delete this line and I'll say here that result right I'll just trying to log the errors if this result has any kind of errors right here so I'll write result hard all letter get okay get all error let me try forget okay get all errors let me use this right now I do not know why this particular method returns this method returns a list of objectives I do one thing I will select this I will hit command one I can assign this to a local variable and right now from this all errors I'm going to face all the error one by one I'll just use a for each loop here and I can say object error temp and all errors is actually containing the list right so I'm just writing a simple for each loop and I'm going to print out the pimp and that's it right so right now let me see if my form has any errors those errors are getting printed to my consoles or not so I'll go back again let me submit this particular form I'll go back to my console so if we observe the console here right now we will get a very detailed output it is saying this user info has a field error for user name property and it has a rejected value right so if you go all the way to the end of this particular error message you can see our error message that we have defined star user name cannot be blank cool so we are able to print our error message right here in the console but actually this doesn't make sense right actually we are just printing our error messages of console the console is thus meant for the developer what I want here is that this particular message user name cannot be blank this message I want to print it right here okay right here after the your name textbox if this box is left empty we should be able to print the particular error message right here after your name correct so what I can do I can go to my home page and I will do a very simple thing I do command set R to open and go to my home page then I will do what I'll go to my your name textbox this is my your name textbox and this is the P tag that I have to attend for a theist and right now I will Jewish from : errors okay I will use this tag right now I'll end this tag right here just after this I can give the correct path and the path is username itself right I need a copy this is my bean property name and I will paste this inside this path attribute where the command is so now let me go to my website and I do what I will not enter your name let me enter some random crush name and I will do calculate and boom I get something right here user name cannot be back is this the exact error message that are configured right here in my DT oh yes user name cannot be blank this particular error message right now I am able to print next to my your name so anytime if I will not be filling in the data for the your name textbox I will be getting this validation error message just right next to my your name textbox okay let's say right now I have given some data for this and I will go calculate I will be able to go to the next space okay cool that's pretty nice my server-side validation is working really really good so now let's say I want to do some more validation right now so what if if the user is providing only one character and adhere to calculate obviously he'll go to the next space because he has provided one character for this and it's not blank correct so I'll do another validation for this right now there should be at least two or three characters should be entered to this particular field in order to submit this particular form successfully and in order to do that I'll go again to my user info DT or and I can actually use it another annotation right here lesser at mean and I'll hit control space and I'll use the one Java X validation dot constraints and here I'll provide a minimum character so I will say a value and the value should be let's say there should be at least three characters okay and I can also provide a message here let's say message equal to and I can say I can say star and I can say username or your name should have at least three characters okay and this this one also I'll change to your name not username shall write your name okay command is to step so for now if I'll not fill in any details for my your name and crush name and if I'll do calculate I should be getting two different error message one is your name should have at least three characters and your name cannot be blank you can also see this right here we have two different error messages your name should have at least three character your name cannot be blank all these two error message get getting triggered during the time of the form submission if we are not filling the correct details right now let's say I'm giving only one character right here in my your name field so this message should go where write your name cannot be blank because I have given one character to this but this particular error message should triggered because I have not given three characters that mean to calculate and let me check that yes one of the LMS is gone away and we have only one right here so my validation is really working good right now and I am ready to go and you are doing a good job and I think right now we have got the foundation for the bean validation and how actually it is working but if you see the LMS is right here and the way our page is looking right now is just it's just crap right you don't like it I don't like it we're going to change it we're just going to make it pretty okay don't worry we're going to do that pretty pretty soon but one thing to feel good here is that our thing is working good our core is working good and we are able to do some server-side validation to it we are doing a really really good congratulation so now let's make our application pretty okay by adding some CSS to it so if you actually see a real-world form you can always see this validation messages in red color right as it's pretty prominent to eyes so what I can do here actually I can go back to my STS I can go back to my home page and here for my homepage I actually want the backend code of my home page and now I'll write a CSS class for my errors right so I can go back to my head pack so right now I have a JavaScript function right here let it be right here because I'm going to use it later on because my plan here to bring the front end and the back end validation together so that you guys can be our about the validation and how we can add both server-side and client-side validation to our application so that our application performance will be proved the quality of our application will be improve so let it be there this particular function and right now I want to add some CSS to it so I'll write style right here and I'm going to give a line break just to separate this tie line style and I will write a CSS class and again if you do not know CSS door Noorie you are coding in Java and how come you will not understand a simple piece of CSS code it's impossible so to create a CSS class I want to use a dot here and I can give any name but I want to give my class name as error and I'm going to open and close the curly brace here okay so right now the column for my error which is this thing I want to turn this thing to red color so I'll write your collar control space now write rate semicolon and I want to save this space and I'm going to replace the space and nothing happens because I have not used this class anywhere so let me copy this class and let me go where I am actually using my form errors so for my username okay for my your name field I have actually used F for errors right here so I will give a CSS class to this shall write CSS class and my class name is error write command is to save right now let me do one thing let me go back to the Google Chrome one second let me refresh the space and boom our error message right now in red color so now if I remove this character from here and again I'll do calculate you can see I have to error messages and both are in red color but there is another problem right now so if my username and crush name both are empty as you can see there is nothing after username there is nothing after crush name if both are empty then the position of this your name text-box is changing so let me remove this username and crush them from the URL and let me do enter see right now is pretty fine but whenever there is some validation messages things are looking pretty bad because I want these error messages to be at your right after the your name but the position of the your name should not be changed right there should be fixed so to make it happen and to make it good what I can do here is I can go back to my CSS class that I've written which is error let me go to the styling style tag first of all let me do a command sip F okay and after that right now for this error class I want to add few more property let's say I want to make this position fixed okay command s now let me rephrase this particular face cool so we're getting these things right here which is nice but right now I want all this text to be aligned to left so I will go here and I can say a line text sorry I can say text aligned okay and I'll say let command S and let me refresh this particular page that's good right now I want to have some space between this your name and this error messages so what I can do here I can write something called marginal left I can give a left margin let's say 30 pixel okay and that's it I think this should this should be good good right so right now I think we are pretty much good with the look and feel stuff of our website and we are ready to go so right now what's next so right now we have two validation messages your name should have at least three characters well I didn't feel it good you know what I actually should have used a different annotation for the name field for the your name so if I go back to my DTO here I have used at mean a notation right so it doesn't feel good let me use at size annotation instead of at meaner notation so the size a notation will have a minimum and a maximum property so I can use a minimum property to give the minimum number of characterless s3 and maximum property to give the maximum number of character less they're 15 and I also can provide a message to this just like I have did before just like I have done here so I can copy this message and I can paste it right here so for name oh we should always use the size a notation not the mean a notation so the mean a notation is good for a property like age or something a cinema ticket number okay or car seat number okay that will be a proper place to use admin a notation don't worry about it I'm going to use this annotation whenever I'll be using it in a different form but for now let me delete it and I will go with the size and notation let's say the name field the user name field should have minimum three character and maximum 15 character and if not you will get this error message in your form itself right so let me do a command cept oh because I have some unused import here so let me hit command Sept or let me do command s let me go here let me rephrase this page okay let me go to my route to URL right now so I can come from the scratch I can provide my your name let's say I'm not providing anything your name and cross name doing calculate I'll be getting my validation messages your name should have at least three character let me modify it your name should have care between 3 to 15 correct this is the value we have specified right here 3 and 15 that's nice I'll go here again let me refresh this particular page so right now I'll fill in some random value I'll fill in some random value here and I will do calculate I should be able to go to the next place so what will happen if I will enter only 2 character I'll do calculate it is saying your name should have character between 3 and 15 so I'll give one more character right here calculate I'll be able to go to the next page and what if I'll exceed the number of maximum County or 15 I can type in some random value here and I'll do calculate and you can see the validation triggers right here so our validation is working good right now so both spring and Java working together to make our validation successful you so now I want to bring in both front end and the back end validation together and I'll explain you how it helps if the front and validation fell or eave the client side validation fails right so I'll go back to my STS and I'll go to my homepage dot JSP here I have a JavaScript function let me say is this minimum length 2 3 4 now because that's what we are doing in our server-side code also in my java code also i've specified 3 right here the minimum size so I'll do the same thing right here let's set 3 so the minimum character for the username field will be always 3 because this why n is belong to the username field and for the label your name right now again I will put the onsubmit attribute to return and my method name my method name is what validate user name let me copy this now let me paste it right here command V and let me call this particular function command s to save okay so now let me taste this let me check first my front-end validation is getting triggered or not so I'll refresh my page and I will not enter any kind of text right here and I will do calculate well my server-side validation is getting triggered Forest I'm not expecting this because I want my client side validation to trigger first and why didn't happen because of the typos main because of the typos with on let me do command S again let me rephrase this particular pace and right now let me do calculate and there you go first my JavaScript validation triggers first my client side validation triggers so before I moved to the server side Court before I give so much stretch to my server first of all I want to make sure that things will be shot out in my client side validation and if something really bad is happening here then my server side validation will trigger this way I'm fulfilling the requirement right here and i am doing calculate i am able to go to the next so if my criteria is not getting satisfied first of all my client side validation is getting triggered so right now let's say if somebody is trying to trick my application by doing some you know extracurricular activities right here just like if we'll go to the console tab if here I'm going to run a command and I'll say disable JavaScript so right now my JavaScript has been disabled and if I'm trying to do calculate right now cool my client said why doesn't it work but here we go man you cannot bypass the thing right I also have a server-side check and that's going to catch you you bad guy and our validation is completely successful here so that's how you're going to see a lot of validation the front end and the back end together in your real-time project or in your real-time code okay so that's good right now I think you have a pretty good idea about the form validation both the client side and the server side but I'm going to remove the client-side validation from here now because I want to specifically explain you the server side validation you okay so right now let me close this guy's if you if you remember our we're frame right our home page we're frame there is something which is still missing here so this is the page that I'm trying to build and I have already built the your name and the crush name but I have to build one more checkbox here which is going to be a asked to the user torment condition and we have to make sure that if the user is not taking this set box we will restrict him to use our application and to do that I will again go back to my SDS and here in between my form and form I'm going to introduce a check box so I'll give it another P tag here P and P and right here I have to include its egg box shall save form colon check box then the path right so I'll go to my user info DTO so right now here I'm going to introduce a new boolean field it's going to be a boolean because it is going to hold the value true or false yes or no whether the user has been checked the term and condition box or not so it's basically gonna be a true or false so I'll say private boolean let me say term and condition okay and right now I'm going to hit command one create getter and setter and it will be after the set crush name and I will do okay I will make sure that I have a getter and setter for this cool so right now let me copy the property name and I will go to my home paste or JSP I'll provide the path here that's nice I'm going to give a ID to my check box let's say ID check my ID name will be check right now let me create a label for this so I'll write label and the level for this check box is going to be I am agreeing that this is for fun okay so that's nice so right now let me go back to my home page and if i refresh this things are looking good I'm getting a checkbox right here okay so if the checkbox is checked then I'll make sure that the user should able to go to the next place if it is not checked then I will show the user some form validation error and I've tell him that hey you have to accept it this is love calculator application we are just building it for fun you have to agree that this is fake right you cannot hack it seriously obviously so right now if you see now here if I go to my LC app controller so let me do one thing whenever whenever my data binding is happening so I do one thing I'll have another log here assess this out and I'll do user info DT or just the object of my DTO upset and I will do yes tournament condition okay it would be better if I say it is term and condition accepted but that's okay for now let's say each term and condition I am going to raise factor the name later but right now let me check the value what the what kind of value that I'm getting out of this right so to check that again I'll go to my form let me let me fire my URL and let's say I'm going to enter something here into something here and I'm checking this box and if I am doing calculate cool I'm going to the next phase but that doesn't matter I want to see my console here and is saying true because I did check this particular box right and what about if I'll not check it okay if I'll not check it and if I will calculate what will happen so let me clear my console here let me come here again and I'll do calculate okay I move into the next phase because I do not have any validation for now and you can see it is false right now so that's pretty good if you are checking it we are getting true in the console and if you're not checking it we're getting false in the console okay then it proves that in our user info DT or whatever the value we are entering in our form that particular checkbox' value is getting binded to our tournament condition boolean property that's good so what I can do here right now I have to make sure user heads check the checkbox in order to move to the next place and if he is not checking it then he is restricted to user application and to make it happen I'm going to use it another annotation here called assert true or assert false I'm going to say here assert true this checkbox should be true always if he or she want to use this application so I'll write message here and I'll give a message you have to agree to our term and condition right well I'll say you have to agree to use our app that's good so right now uh sure - will do its job and in our LC up controller the user data will be binding to the user info DTO and if that checkbox has not been selected we'll have an error message and I will make sure that that error message will be shown in the home page itself so I'll go to my home page and I'll do one thing here after the label here I can do one thing so I want to have a form slash error again and here I'll give the part so what is my path name the part equal to this one tournament condition this is our property name right command V command S and okay so now let me go back to my application and let me check whether my validation is working if I'm not checking this box I do hit calculate and okay something is happening I'm agreeing that this is for fun you have to agree to user up what kind of sentence is that okay I'm going to refactor this error name but the cool thing is we are not moving to the next space right so this thing is not read probably because I have I have missed my CSS class here so I'll write not not here just here I'll write CSS class and it is error so my CSS class name is error that's good right now I do a ctrl save I'll go to my Google Chrome right now and right I'm putting some value for your name putting some value for crush name and I will do calculate cool but still is not in red color why CSS class name is error oops again a typo main class name is error what I have written here error command s I'm going to copy this name error and I'm going to fix wherever I have written it I have used it in my urine M field I do command V I have used it here again I'm going to do command V command has to save and go back here i refresh the page and boom we get it right here correct now we get this in red color okay so if I'm hitting this set box and if I'll do calculate I'll be able to go to the next place and if I'll not be hitting this checkbox then I cannot use this up and I'll get this error message correct so things are looking good so we have a validation in place for our euro name we have a validation in place for our you know for this check box so if I'll do calculate here I have some very distant message for this I have some validation message for this I will make sure the same validation message for the cross name as well so what I can do here I can go to my user info DT or I'll copy these two messages okay not blank the crush name also will not be blank and also the same criteria for the crush name it should be between 3 and 15 character and further and for the term and condition you have to agree to user up let's say agree to user up ok command S okay so one more thing I can edit this message this is the crush name field right so I can say crush name cannot be blank and I can also say crush name should have character between 3 to 15 and I will also go to my home paste or JSP and I will make sure that this crush name form input also bind to the error right so I will copy this form error command C command V here and I'll change the path to crush name and I'll apply the CSS called CSS class to error I'll do command s to save now I will go to my Google Chrome and let me hit the home page URL for now and let's say I am not providing any details here I'll do calculate I have all the validation triggers okay so let me fill this in let me fill this in I'm checking this box calculate well it's working good okay why Dave if I'm only going to remove this brush name calculate only I'll get the validation for the crush name okay so things are working very good right now so I'll encourage you to practice this by yourself so that we can do some more advanced thing in the next video but for now go ahead you'll do form errors in your home page I just try to use all this annotation these three annotation we have done right here right let's try to practice them and I will get back with some more annotation in the coming videos and also we'll have a lot of fun doing it because still the amount of knowledge that we have still I consider ourself as a very beginner we will right now play with all this annotations and later on what we will do we will create our own annotations just like size the size is an annotation right so how they have created this annotation can we create our own annotation so all these things coming off in the next video so the next video will be doing a lot of advanced thing and it'll help you pretty much in your real time project so play with it be comfortable and come back to the next lecture with full preparation oh you guys thank you very much for watching this tutorial if you have any doubt any query please write me a mail to selenium expresses the read gmail.com or for support you can join my support group in my Facebook page called selenium Express - support you can get the link in the description and also if you have any queries any question don't forget to comment a question in the comment box as well I'm going to definitely answer you out and also I'm new to Instagram right now if you want you can call them in instagram my instagram ID is selenium underscore express okay that's it for this tutorial see you in the next video till then bye bye happy coding and take care [Music]

Channel: Selenium Express

Views: 21,976

Rating: 4.9817767 out of 5

Keywords: spring boot form validation example, hibernate validator spring boot, spring mvc validation tutorial, what is server side validation, client side vs server side validation, spring mvc form validation, bean validation api, spring mvc data binding, spring mvc step by step, spring mvc tutorial, spring by selenium express, spring boot by selenium express, jsr 303/349/380 annotations, how to handle form validations in a spring mvc project, spring mvc form validations using annotations

Id: ot-TI5T7-5M

Length: 83min 23sec (5003 seconds)

Published: Fri Apr 10 2020