How to Validate Password and Confirm Password Fields Match in FlutterFlow

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
hello guys all right so um in this tutorial I'm going to show you how to validate that password and confirm password Fields match okay I'm going to show you how to validate that confirm password and password field match so flutter flow provides um a different form of validation but as of the time of recording this um tutorial the there is no validation that um helps you to confirm if the password and password feels okay do much especially if you building sign up so if you're building sign up you would like um the user to put a user experience that will help the user to confirm um password okay why do we have confirmed password so that you be sure that the user actually knows the password that you or she must have entered before creating an account all right so the first thing we are going to do here is that we're going to create a blank project okay so once you log into FL you can just create a blank project so I'm going to call name of my project my app all right so click on create BL project I'm going to leave everything like that just skip all right so here we are uh because of time I'm not going to build a sign of page all right I'm just going to um grab a sign up page okay from flow page templates all right so here we are so I'm going to use yes I need this so I'm going to design I'm going to use this yeah so then uh okay yes my team all right so if you want to rename it you can just do that here but I don't want to I can just create a page all right so this is what we have um assuming this is what you building and you're using a sign up page that's create account page you want the user to create account by entering the email password and then confirm password okay you want the user to confirm that the password entered here matches with this one so I'm going to do something here so that once the user start entering password here it's there will be a promt an error prompt below here that will display the password doesn't match it will keep on checking the password the two password match okay once the password the ER message just go so that's what we want to do now all right so the first thing we are going to do is to create a variable okay we're going to create a variable in the page so we need the variable so we can update the state of the password match so once the password matches want to update it it's going to be a boan so once the password matches update it to true but once the password are not matching we update it to false so to do that to create a state variable a page variable okay what you're going to do is just click outside the screen and then come over here so this is the state management for the page where you manage the state and you need to create a local page variable so just click on the field and then um you can give it any name but I'm going to give it password match all right so what type of variable will it be it's going to be I want it to be a boo a Boolean type of variable that is either true or false all right so yes I want it to be nullable I can set this let me see the initial field here so let me just set this so if you are done doing that the next thing we're going to do is to create the error message here we're going to use a conditional Builder so conditional Builder is a base element flow okay that helps you conditionally show a particular wiget component based on a condition so you can scroll down here to find a page builder or you can just search for it up here so I'm going to search for conditional okay so I'll drag it and put it I want the conditional Builder to be under here all right so we'll come over to the properties so condition Builder has um two like the if then and the else okay so we are going to put the condition here then what it will show if the condition is true up here and then if the condition is false what it will show down here so the condition is the page States okay so if the page the password match which is the variable created that keep the status okay is true okay it shows a component here else it shows a component here all right it shows the component here so here I'm going to come out here and um click on properties so you scroll down here you see the conditional build so it has if and then so whatever you want to show if the condition is true put it here so I don't want to show anything I just um because you must put a widget a component um you can't leave this empty even if you don't want to show anything when the password matches so yeah I will just add a container and then um come down here and make the just make it one the we one pixel the height one pixel so this will just make the container kind of non visible so because I need something to show so it's going to show like this so the the coner won't be visible then if the password do not match it should show the error so I'm going to click here and um I'm going to click here to add a placeholder all right I'm going to come over here and click here all right so um I'm going to add come down here and then look for row I want to add a text box a Tex field here yes I want to p on the RO so I can customize the placement all right so I'll add the r first then inside the r i click here I'll add the text all right so something like this so here I can customize my text so here I want to it to be password does not much okay and um I want it to I want to reduce this it's too big so reduce it the size and probably change the test color to error okay all right so I think that's that's fine I would like to do can give you the B size if you want you can give the size if you want do that see we are going to add an action so the next thing we you can do is to add action on the confirm password so here what you want is that when the user is typing in here you want to be checking what the user is typing okay you have to be checking if what user is typing here is the same thing as what is up here so whenever it's true want to dat the password match that Parable we created so that will take up this okay so to do that just click on password and then go to action action so I'm going to open an action um editor and I want the action to ur on change so what that means is that whenever you type any character inside the password the confirm password field it will check the condition okay so click on condition so the condition I want to check is basically single condition so I select single condition so I want to check um the first value is going to be the password so I go to wigi State and get the password then I want to check if is equal to the second one is going to be the confirm password so what user is entering in the conf password so I'm going to get that value from the wig state of the confirm password all right so once you're done just hit confirm if the password is equal to confirm password all right so I should add an action and what action do I want to add I want to update the state div so I go to state state and you see update page state so click on the page State then add the variable okay yes password match sorry that what I want to update so select that and you need to yes set value so if it is if it is true I should set it to True like if this password matches the confirm password I should set this to true then I should that should be all for the true I should this and then else if it is false I should do the same thing set the page state to false yes match password match then change it to set value and then false so if you don't want of course we want um the page to be rebuild so that's actually why we this okay so that should be I think that should be all for the action so I'm going to terate this and then loose this all right so the next thing we have to do at this point is to probably check okay so let's test it all right so click on test mode okay all right so this what we have so we can just type email let's say John do okay at gmail.com then password 1 2 3 4 5 6 7 eight all right so here 1 2 three so as you can see 4 5 6 7 8 so if you notice it's um actually kind of delaying okay it's not it's not fast there's a delay so we're going to sort that out all right so it's working it's working sech this okay so there's a delay so we're going to sort out that delay um let's come back here and sort that out and also there there are few things um when there's error okay when there's error this border line still shows blue want it to show red okay even when you click out of you also want it to show red showing that has an error okay and then we're also going to fix this delay okay the error usually appears um some second some some micros okay all right so to to do that first of all we go to confirm password yes come to properties and then if you scroll down here scroll down down down you should see um yes so you should see update delay we're going to put the delay to 500 all right so 500 should then make it to be a bit faster and then we also have to change the Border color so we scroll down to water color all right so here water color I want to make it show the error okay when the password matches that is when the variable created which is password match okay is true okay let it show this color l let it show the AR color so we do that for the color we do that for Focus color so so do that we just click here and then click on condition all right so if then set the condition the condition is going to be page States P page state it is true we should you should use this color um I think that should be the primary background okay then else it should show like this Cas is false should use the error color Okay confirm we'll do the same thing for Focus color to so if it's it's conditional need conditional so if P States password match is true it should use the normal color which is the primary okay this color all right so else should use the error color that's else if this is false meaning the password should use on confirm all right so let's try it again so come over here and uh do instant reload all right so let's also test again so so one can see 2 3 4 5 6 7 8 so it's fast now and that is it for building uh sign up page with confirm password so this is how to validate that your password and confirm password feel to much please do well to subscribe and let me know if you have any um difficulty in F FL and I'm going to jump in and probably create a video to address your your issue all right please make sure you subscribe you like the page let's let me hear if there's other we have been able to solve this in the comment section thank you
Info
Channel: Code Ambassadors
Views: 494
Rating: undefined out of 5
Keywords: FlutterFlow, FF, passoword validation, confirm password, coding, mobile app, flutter, password fields, validation, password validation in flutter, password validation in flutterflow
Id: 5eV1TDaUkwA
Channel Id: undefined
Length: 16min 39sec (999 seconds)
Published: Tue Feb 06 2024
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.