State Validation | How to manage Recomposition | Validator in Jetpack Compose

hey everyone welcome to Native mobile weights in our previous videos we have developed one complete login feature which has multiple screens and all of these screens are linked with our custom routing we have also divided our applications in two layers UI layer and data layer with one very basic recommended architecture and in today's video we are going to create our custom validator which we can use in any applications and it will help us to find out if there is any error in data entered by user with the help of our own validator we will be able to update the UI state of our applications so let's start today's video and if you are new to my videos let me give you one tour of this project okay so we have these packages okay we have our main activity and inside this we have our main app component composable inside this we have our own router okay and then we have multiple screens okay inside these screens we are using different different components OK and these components we are having inside this package in app components okay now if you just check out the application in emulator you will feel this is the application as of now okay we have this sign up page then we have the login page and we have this routing there is some privacy policy and these screens as well but now we have handled this with the help of our view model and UI State okay so if I close everything and just take you to the data layer so we have one viewmodel okay then we have one state we have one UI event okay so what happens here is we have this UI event so whenever user perform an action so we trigger one UI event whenever any UI event is triggered we get that event inside our view model and then inside our view model we update the state okay we have one state our state has information about all of these fields so if user take any action one UI event will be triggered and then we will be capturing that inside our view model and we will be updating the UI state so this is the quick recap now in today's video we are going to add our own validator so that we can get to know that if user has entered the data which passes our own condition okay so in your applications you will be having some set of rules that if user want to enter some first name it should be either in this range or it should be having some specific conditions and so on so for that with this UI layer and data layer architecture let's Implement our own validator okay so let's create one package one sub package we can say and we'll call it as rules okay and inside this we will create one validator object it will be kind of a Singleton class okay so we can just take this we can choose object and we are going to call it as validator okay now this class will have all the rules which we want to identify if our data is valid or not so we have these fields we need to write rules for all of these field so we will Define one function validate first name and this function will take first name as input parameter okay and similarly we will create rule function for last name then for email and then for our password field now these are our rules function but we will need some kind of validation result right like if the data is valid or not so for that let's define one data class okay and we will call it as validation result okay and this will be having one status like if result is true or not okay this will be of type Boolean and let's say y default the value of this state as is false okay everyone will return validation result some kind of validation result like if the first name is valid or if the last name is node valid and so on okay so we are adding this as a return type for all of these function now we need to write the actual rule so we are going to return one validation result and inside this we will just add the condition we need so now let's say we want that our first name should node be null or empty and it should have at least 6 character in length so we can just write first name is null or MD we will just add one opposite check that means if first name is node null and it's node empty as well and if our first name length is greater than equal to 6 okay then our first name will be valid okay so this will be our validation result passed from this rule similarly we can just write for last name let's say we are writing the same logic for last name that at least greater than 6 or let's say we are making it greater than or equal to 4 and our last name is node null or empty that means every field is mandatory as of now for email also let's add one check so for now we have added one check for email as well that if email is node null or empty then our email is valid we can add the email condition with regex so that we can check that if it is a actual email or not we will add that later but for now we are going to go ahead with this same rule okay for password also we have added that if it's node null or empty and at least some characters are there right so let's say we need at least greater than equal to 4. and these are our rules now now we need these rules inside our view model when someone is clicking on this register button so let's go to our sign up screen first okay so here you can see that we have this main surface composable and then inside this we have column as a container and we have all of these composable okay so for this register button we have this button component okay so whenever our button is clicked we are passing one UI event to our view model register button clicked okay so let's take this go to our view model and search for this event so we are coming inside this sign up method okay right now we are just printing the state data and we are printing One log now here we need to add one function now inside sign up we are going to write one function validate data with rules okay so we are going to just create one function and inside this function we are going to just use our validator okay so to do that we'll just create one variable and let's say we write first name result like what is the result of the validation right and we can access validator dot validate first name and we can pass the first name here right so for that we can use the data from our state okay how we can do that we can just use let's say use first name named parameter also and pass registration state DOT value DOT first name okay we'll pass this value so we will get the first name result that means if result is valid or not let's create result variable for last name as well last name result and we will just use validator dot validate last name okay we are having just validate last it's fine we can update it little bit last name and we can pass here last name as and we can pass last name from our state okay similarly we can create one for email result and then we can just pass email for password also we can create one password result okay and we can pass our password okay now let's add one log okay inside validate data with rules we'll just use one log and I just want to show you how easy it will become and how our logic will be segregated inside view model which is used inside our data layer and however composed reward will be independent and they will not have any logic inside that okay so the main goal is our composable should be stateless and we are doing the exact same here okay so let me add four logs okay we are just going to take first name and I will just add with the help of dollar symbol and for last name as well I will just add same way for email result as well 4 password result as well okay now we have all of these result now we want to update this UI State whenever we get any error right so first of all we'll go inside our state and here we will Define few variables for error State as well okay so let's add one comma and we will Define few error state for this field so first of all we will just Define one variable first name error and let's write it as Boolean so that we will get to know if there is any error inside this and then we can pass the message from outside so that it will be dynamic and it will not be statically coupled right similar way we will create 1 4 last name error okay this will also be of type Boolean and a false type everything will be false because we want to update the state basically okay email error and type Boolean false for password as well password error type Boolean and it will also be false okay we have our error State variables also and we will go back to our view model okay so we have our state here right this is our state variable it is consisting all of this data so we'll just go inside our validation data with rules method and based on these result we are getting from our validator we can just update our state value okay and how we can update our state value we just need to access this and then our state value dot copy and here we can pass the fields as a named parameter and their respective value okay so we want to update first name error and we can pass the value which is coming from our validator and it will be first name result dot status and this status is coming from validation result right so whenever we call this function we are just checking this condition and this condition will return as true or false same way we can update for last name error if any error is there or not based on last name result dot status similarly for email we can just use email result dot status and for password error also we can use password result dot status okay now we have our UI State updated so that we have some data like if this field is having some error or not so now let's try to write the code to update these field status based on the result coming from our rules okay so we will just go inside our composables and we can just see that these fields are denoted with these composables right so every outline text field is represented with this composable component and we can add one parameter here error status okay this will be of type Boolean again and same parameter we can add inside our password text field as well we have created this separately because there is some Logic for this as you have seen in our previous video okay now we can just go back to our signup screen and here we can access our view model okay and with our viewmodel we can access the state and we can access the value of first name error okay so basically we are just checking error status and we are passing from our viewmodel state okay so in a nutshell this is our view model our view model is having our estate and whenever user is clicking on this register button we are checking the values of these outline text field and we are using our validator and we are updating the value inside state now if any error is coming we are updating inside our composable okay so we are just passing error status for respective text field we can update the error State inside our text field for last name email and password as well we just need to use this name parameter and then with the help of State value via our login view model we can just pass last name error similarly for email we can just add error status we can just pass email error okay this is kind of status for respective field and for password also error status and we can pass password error here okay now we have passed this for all of these text field now one important thing as we are using these composables in other screen also like login screen and we have node written the logic yet so we can make this by default as false in password text field also by default error state is having false value so that if we don't pass the values here yet it will allow us to run our applications now we have passed the error status for all of these text field okay we only need to do one thing inside outline text field we just need to pass this error status how we can pass that and inside our outline text field we have one attribute is error and here we can just pass this error status opposite value we are passing this as opposite value because all of our rules are having the exact true condition that means if our first name is valid we will pass true else in all the condition where we will have some error we will pass false that's why we are making this opposite I will give you one example let's say user launch the application and they click on the sign up button at that time first name will be empty right so this condition will node be true it will be false so we are returning result as false okay now we have the empty State empty text inside the state we are returning false that's why we need to make this opposite okay that's why we are just passing this error State as true if value is false and if value is true means our condition is true then we are just passing error State as false so that no error will be shown in the UI now let's add this in password as well here we'll just add is error and we'll pass error status okay now we will run our application okay our application is installed and we can see that as there is no value all of the fields are showing the empty state with error right if you go to any field you will see that there is one error okay now let's try to enter some value Harry border Harry at the rate Hogwarts .com and password one two three four five six now if you will click on this register button so we'll come into this sign up function and again validation rules will be triggered so let's try to do that if we click on this we can see that only first name is having error because our first name rule is like that that length should be greater than or equal to 6 so let's try to make it 2 2 and this also 2. one another thing is if you want to check the value if it's a valid condition or not we need to click on this register Button as of now but let's try to make Dynamic like if user entering anything so at run time we should be able to show this error and if value is correct we should be able to hide this error so for that we need to update our text field component so to make it Dynamic we need to add one little change so as you are familiar that whenever user type anything own value change will be triggered then we have our high order function owned exchange and we are using this inside our signup screen okay and we are emitting one event first name change so inside these events we can just you know add this function or let's say we can just try to call this function okay validate data with rules so the easiest thing will be that we just call this validation rule we take this and we just add it here and then we update the state value we just pass this first name result okay but as we already have this validation function we can just call this function so let's say if user updated anything we will just try to call this function okay and we will add this inside every UI event and inside adding in every van case we can just add it inside this function itself okay whenever any event is coming let's try to update the validation check okay now let's try to run our application and this time we will see that if it's updating dynamically okay let's enter some value Harry okay now if you noticed the moment we entered the valid value it's updated let's try to do this for the second field for email if we try to enter anything Harry at the rate Hogwarts .com and for password also if we try to update anything it's updating right and if we are removing the value and the value is not matching the condition for our rules it will show the error State okay if we remove the last name as well it will show the error okay so this way we can use validations inside our jetpack compose applications with our unidirectional data flow we are just emitting the event and we are updating our UI State and based on our UI State we are updating the UI inside our application if there is any error we can show the error we can also show some kind of toast or snack bar if you want to show that so this way we can handle the condition so that's it for today's video guys I hope you enjoy the video if you enjoy it please like share and comment your favorite part if you also have any query you can comment down that query as well and I will try to reply you back and please subscribe to my channel and please share it with your friends who are learning Android foreign [Music]

Channel: Native Mobile Bits

Views: 3,379

Keywords: JetpackComposeTutorial, AndroidAppDevelopment, LoginFlowTutorial, UIProgramming, AndroidUIUX, AppDevelopmentTutorial, AndroidDevelopmentTips, AndroidStudio, AndroidJetpack, Jetpack compose tutorials for beginners, how to learn jetpack compose, compose

Id: 008f7IUVYDQ

Length: 20min 20sec (1220 seconds)

Published: Fri May 19 2023