 Hello, everyone. In this module, you will learn how you can apply validation in lightning or our components. So jumping into developer console. So I'm going to create new lightning component where I will be demonstrating you validation. So naming it as validation, clicking on submit. So here in this component view, I need to create the UI part. So entering the text like enter a number, then UI input text or a colon ID equals to input component. Then placing a BR tag, then putting a lightning button, label will be submit and on click of this, I'm going to call do action method. So what will happen? This enter a number will be displayed as a plain text. Then this UI input text tag will be showing input element where you can type some value and when you will be clicking on this button. So this do action method will be executed and the label of this button will be submit. Right. So I saved this dot CMP file. Now I'm going to click on this controller where I will be implementing the JavaScript function. So we used my action as a function name. Right. If you want to change it so you can do that as well. Now here I'm creating one variable as input component, then component dot find input CMP. So here you will also understand the use of RID. So if you provide RID with any element, so through that RID you can find that element in the JavaScript controller. Right. So creating one more variable as value then input CMP dot get V dot value. Right. So through this component dot find we identified the properties of input CMP element whose ID is this then through this input CMP variable. I'm getting the value of that element and that will be available in this value variable. Now we need to test this test this is input numeric. So I'm applying if is not a number value input dot input CMP dot set. Right. So here in this input CMP variable we have the properties of that element whose RID is input CMP. Right. So we are going to set an error message. So V dot errors, then message colon input not a number and then plus value. So this is part is completed. Now I'm going to implement the else part. So here I'm writing clear error. So this is a comment and input CMP dot set. Then V dot errors. Right. So if number is sorry input values not a number then error will be displayed like this. And if this condition is false then error will be clear like no error will be displayed so error will be added this null value. Right. So this way I implemented this controller part as well. So in the view like we have this input element and the button and when you will be clicking on that button. So these operations will be performed. Now I'm going to open the application where I will be using this. So demo application and here I'm going to use this validation component. Clicking on preview. So later on like in previous module I demonstrated you how you can place or a component on record phase or any application. So if you want to use this component somewhere so you can do that. So I'm putting a number and clicking on submit. Okay, unable to. So there's some mistake. I need to identify that. Here it is do action and we use it as my action. So my bad I updated the code refreshing the page putting 10 clicking on submit so you can see no where it is coming. If I put a click on submit. So it is showing error message input not a number. Right. So this way you can simply test like whether input is number or not. So this was a simple demonstration. So I hope you understood now I'm going to demo you one more validation. So closing these components and I'm going to create that new letting component and naming it as date validation. So in the previous example I showed you how we can apply number validation. Now we will learn how we can apply date validation. Right. So we need to implement the code here as well. Okay, so our column attribute name equals to test date type equals to date. So this this is first attribute that I created of type date. I'm going to create one more attribute. So our column attribute name equals to date validation error and type equals to Boolean. So two attributes I created then I'm going to create a dev class I'm using as wide. So inside dev I'm going to use lightning input class equals to V dot date validation error. Right. So actually I'm using the attribute for this class. So we will be changing a value of this attribute. So accordingly this class will be having the value. Right. Instead of closing it I'm using question mark and SLDS hyphen has error. Right. So if this Boolean is true, then the CSS class will be applied like SLDS has error. And I'm closing single codes then colon blank curly basis double quotes. Right. So this way this class attribute of this lightning input is having some value through this date validation error. Now type equals to date. So actually we are implementing input lightning input element. So it's first properties class second is type then label. So label will be entered date. Then value equals to V dot test date. So whatever date you will be selecting so that will be available in this test date attribute. Name equals to date on change equals to C dot date update and closing this. Right. So whenever you will be selecting any date so this date update method will be executed because of like we are assigning or we are like using it with on change. Right. So now after this, I'm going to use aura if so in this demonstration you will also learn like if you want to apply if else on the UI itself. So how you can do that. So for that we need to use or if then is true equals to V dot date validation error. Inside this aura if I'm going to use a div class equals to SLDS. Text color underscore error space SLDS hyphen P hyphen left underscore X hyphen small. And closing the div inside div I'm writing date must be in present or in future. Right. So if it is true. Then only this will work otherwise not. And after this I'm placing a VR tag. Right. So this is basically lightning input that will take date as input. And this is or if which is used to display the error message. Now, after this we are creating a lightning button. So I created one more element or one more tag lightning colon button. So disabled will walk as per this attribute. The variant will be brand on click on click of this button. The submit function will be called. So we need to define this in the controller and label of this button will be submit. Right. So this is the UI code. Now I'm clicking on controller. So I need to implement the controller part. So here I'm updating this to date update. Then creating a variable named as today. New date. Then variable DD equals to today dot. Get date. So they date part will be available in DD. Then for month I created one more variable mm. So today dot get month plus one. Then variable four times y equals to today dot get foliar. Now, if date is less than 10. Then up and zero before date. So if you're entering one, two, three, four, so zero will be appended automatically. So if DD is less than 10. So DD equals to zero plus DD. Then if month less than 10. Then up and zero before month. So if mm is less than 10. And then equals to zero plus mm. Then I'm creating a variable today. Formatted date. Then equals to then we need to put four times y then plus. Then in single quotes, I'm putting hyphen then again plus mm. Then plus then in single quotes hyphen then plus DD. Now, if component dot get V dot test date. V dot test date is attribute that we created here. So we are fetching its value to component dot get. So if it is not equals to blank and component dot get V dot test date. So here component dot get then V dot test date. Then after this bracket. Okay, so let me shift it to new line. So here what we need to put. So I'm just copying this. So I pasted today formatted date. Right. Then close this packet. So we are checking whether test date is empty or not. And whether test date is less than to this. Today formatted date or not. Right. Now, if these two conditions are true. Then component dot set V dot date validation error. We are setting it true. And in else, we need to set it as false. So else pasting it here. And here we need to put it as false. Right. So this way this first method is implemented putting a comma. And here I need to write one more method. So here we are calling two methods. One is date update and one is submit. So date update we implemented. Now we need to implement the submit method. So I'm copying these from here pasted. Now inside these curly basis, I need to write the code. So variable is date error equals to component dot get. Then inside this I'm putting attribute V dot date validation error. So I'm copying it pasting it here. Then if is date error. Not equals to true. Then alert and data is valid. Right. Okay. So now I'm going to. Use this lightning component on this application so that we can test it. So date validation. Clicking on preview. So let's see this code again. Right. So here basically. Date format is created till here. Then we are checking through this component dot get like test date is not equals to null or blank. And it should be component. So component dot get V dot test date is less than today formative date. Right. So date must be in present or future. So if date is. Enter date is less than this today's formative date. Then that error message will be displayed. Here you can see we can enter the date. So. This org current date is 22. 25 select 21. Okay. So it is showing some error date a bit component. Okay. Component is not. Okay. I just need to refresh because I modified the component spelling. That was a typo. So selecting 21. So here you can see it is showing date must be in present or in future. And here you can see submit button is disabled. Now how it happened. So here. Yeah. For this lighting button, we are using this disabled property. And we are using this attribute. So if it is. True. Like validation is there. In that case, a button will be disabled otherwise not. Now, if I select today date. So here you can see it is working fine. Okay. So basically what is happening, it is not taking the org date. It is taking the system date. Right. This error message on 22 because today is 23. So if I select 23, so here you can see. Summit button is visible. And if I click on this, so it is showing entered data is valid. Right. So this way I hope you understood how we can use different features. Of aura. So. Here a lightning input is used or if is used lightning button is used where disabled property we saw. And in controller we implemented two methods to support them. So this is all about how we can apply validations in our component. Thank you.