Flutter Form Validation | Flutter TextField Validation | Flutter TextFormField

[Music] [Music] hello everyone well in this tutorial we'll learn how to do flutter form validation to do this we'll use rejects and flutter by the way if you want to follow along with me go go ahead and download the code from the link below github link and install it and if you don't want to follow along with me just follow the coding it's fine you can just follow from here either way it would be working okay so the first to do will create a size box here well before we create size bus actually let me tell you so this is what you'll have once you run the code okay pretty much very simple and within it actually i have a container a body uh within scaffold body and then within body i have this container wrapping around everything and then within container i have this form and this is more like html or web form where you have a form tag so this is pretty much the same thing and in html you might have a forum key like id or form id so that's what we have here form key is more like id well it's a name it could be any name that you can declare somewhere here so there should be a global key for your form or form state so it maintains the form state or you can call it as a key all right so that's what you need to do if you want to have form validation the first thing of course you have to have form and then the form key and rest of the things are pretty straightforward so right now what i will do first we'll create a size box over here so we'll do size the box and then we'll do height okay height height say 0.05 okay well because we want to put things right a little bit below it okay so there should be a distance and then the next thing we'll call is called text form fill this one okay so this is the one which should be taking text which will which will take text from user input and then we'll validate it okay the first thing first that we want to do uh decoration and this decoration for checking input so we'll call it input declaration or i mean this is the default class in flutter you need to call it and now here you'll have this label text okay and you can call it say enter your name okay so we'll save it and see that it's right there okay save it and update it it's right there okay so that's our form field and if this decoration basically does a lot of other things as you can see from here but basically right now we'll just use level text okay and within form fall there is another property that's called validator so that's what it will call now and it takes it anonymous function with the value so pass a random variable as value okay i mean a random name as value i would say all right and then we'll try to validate it whatever we type in here so the first we'll check if it's a null or not so let's call value null and if it's not null then we'll check if it's empty or not okay if it's empty or not or the other condition now we'll use rejects condition okay so what is the rejects condition now this one we have to write by ourself okay so over here we want to just type in name name should have uh like for example all the characters c d upon it a small letter and maybe space okay so that's what we want to do with name so in rejects and in flatter if you do rejects if it's rejects for string it should start with r and then uh single quote and within single quote you'll have this sign and then we'll do a to z and space a to z so this one okay and then we'll call like has i guess they call it has match okay has match and then value let's see i think we need to import a view thing maybe all right let's see rex not rex is rejects i think now let's see okay now it's working okay okay if it has value and then if it doesn't match the value we'll do certain thing okay now let me walk you through again what's happening here first we check the value either null or not if it's null not then also at the same time check it is empty or not and after that we put our text whatever we type in here within this rejects uh what is it rejects conditional statement i would say okay now here is in flutter in general you will start with r that means raw string and then whatever the condition it stays between the single coat and now this means beginning of uh string okay of course as we have beginning of the string we have to end the string so to end it you you need to use a plus dollar sign okay and now within this parenthesis this brackets whatever you put they should match so what we are trying to match a to z that's small letter and this is the capital letters so if it doesn't match that's why we have this negation over here then we'll return and returning after returning we'll say please enter correct correct name okay that's what we would say else will return no that means everything is correct as we expected so that's the validation for name field over here okay hopefully it makes sense again so whatever the value user types in it's taken into here then we do a few checks whether it's empty or not if it's empty definitely we need to write our name again or if you have numbers or special characters then it will give you this warning that please write again okay all right so that was for the name field now what do we do we don't want to write this thing again and again would you do would copy them okay so let's go ahead and copy it it would make our life easy and save a lot of time okay now the same for another field okay now let's go ahead and run it and we see something beautiful over here but of course we need to change the label this label meaning i mean uh this label text so the second one say enter your phone number okay or enter your number all right and please enter correct phone number okay and the second one is enter your email okay please enter correct email so this one okay now let's save it and the change right but now of course the rejects says this expression is correct only for the first one that's for name now this is for phone number okay so we need to write the rejects for phone number so what do we do we need to change all of it so what we'll do we'll just delete this section over here now we'll start again so now now phone number could have many different variation based on country but a lot of phone numbers they have a plus sign at the beginning okay at least when we see it in a form or in a name card there is a plus sign okay so that's why we have this plus sign and then you have this star that star means whatever happens whatever comes after it take it okay so now a lot of time you will have this first bracket uh within phone number at least like say three digits so there is they're wrapped around the bracket uh especially those are u.s numbers i would say all right yeah and then what you do would take 0 to 1 any of any number of them it could be 0 it could be 1 all right so but now here it's saying that sorry this zero one is more like this bracket it may appear zero times or one time that's what it means it could be zero times or one time not more than that so either there is a bracket or no bracket if there is there is only one okay all right and after that we are looking for some digits so what are the digits from zero to nine and those numbers they appear say for example uh one to four times so these digits they may appear like for example uh from any digit from zero to nine and they could these numbers could be only one number or up to four numbers like that okay and then i'll continue with this next is now you want to finish this bracket over here so what you do just to write this again this bracket this time the opposite one and once again it could appear zero times or one times okay and after that we'll go ahead with the rest of the numbers so how to do that so there might be a dash in your number for a lot of phone numbers as a dash so that's why we have this dash and after this you might have any any any character okay as for any non-white space character like say one two three four even i think it could also stand for other characters but no white space okay that's what it means and then we we might also have a dot okay and then other zero to nine so that's the basic phone number format that i'm using over here but you could use uh like if you're in china or in india the phone number format could be very different so for your particular case you need to have that kind of format uh rejects expression based on your phone number or your country's phone number okay so this is very different for pretty much every country i would say it could be different all right now would go for this email address now once again we'll delete all of it we don't need any of uh delete all of it okay and then what you do now over here for email address uh we'll have say any letter okay w means uh this this means slash backslash w means any kind of uh letters or numbers alphanumeric numbers okay but that doesn't include any space and then we'll have like in your email address you might have a dash or underscore so this stands for both dash and underscore and then in your email address at the beginning you might have a dot so that's why we have this one okay and then plus this at sign so every email has that sign and then we'll have once again this uh like character w it means any kind of number or digit or letters okay and then once again you might have this dash after at sign like for example your email address could be a dot a a b c d at a dot com like that okay or you might have a underscore a dot-com so it matches any of them so after a it could be any any letters or numbers that it should match or underscore or dash like that okay and then would what we do we'll wrap it we'll finish it here and then so go ahead and finish this expressions okay so eventually it's done so the way it works that first you start with any kind of letter with numbers and then you might have dash and then you might have dots so that's a general combination and then you might have this of course definitely you'll have at and after that any number any letters and dash underscore combination there should be a period that now after this period you should have like dot com dot net dot base like that okay so i think we can skip this one i'm not sure why the some people they use this dash because in general there is no under underscore calm or underscore like this okay but some of the expressions that did use it so i'm not sure why but anyway so any expressions so any letters and or it could be any numbers as well because this w stands for actual numbers as well but in general you will not will not have any numbers but anyway whatever shows up then it could repeat up to two to four times because some of them like say for example uh dot io or dot store or dot uh many different you know combination at the end so that's why two to four in your case it could be two to five it's up to you that how you go ahead and do it okay all right so we are done with this uh combination but now we need to find a way to submit this form uh that's pretty easy though but before we do that we need to create a submit button so let's go ahead and do it here we are we have created this submit button and let's run it see the result yeah so this is the button that i've created but uh now i want to put a bit distance around it because right now they're too close there's two text fill in the row which means the button okay now let's go ahead and see the button the button is pretty simple because i used two elements next to each other so that's why i have used row within row i have this this for the sign up and then this new morphic design button but you can skip that you can just have any kind of button or elevated button and then you have this unpressed event and within unpressed events something interesting happens like the phone submission happens now if the validation is done then you can go ahead and do or show other things or submit to server like that okay so here once you click on the button if the condition is true then it shows your message otherwise it will show here these errors like as we saw all right so now we can go ahead and do the test for example say write your name your name say uh aaa 8 hey oh definitely that's not a name now say phone number and say your email address i ate a dot com now let's hit enter as you see because the name is not correct okay so what we could do we can fix it say hmad and now over here say we can have like zzz let's see what error we get no phone number is incorrect so that means that it's working right now for example here if you have this uh uh hyphen uh so this question mark so it won't work right so now it means our validation is working so now once the validation is done it falls back over here for now we'll send a message to our user that form is submitting otherwise in general you'd submit it to the server and next next tutorial we'll see how to submit it to the server but now let's go ahead and click enter button now it will say that submitting the form okay so the most important thing about this uh text form fill that you'll have a text from filled widget and then your text label and then you'll have a validator and inside the validator you'll have your rejects expression or regular expression like that okay so if you like the video don't forget to subscribe and share the video with your friends thanks so much

Channel: dbestech

Views: 9,002

Keywords: flutter form validation, flutter form field, flutter form submit, text form field flutter, flutter form tutorial, flutter textformfield, flutter textfield, flutter textfield design, flutter tutorial, flutter, flutter textfield controller value, flutter form validation example, flutter textformfield example, flutter text form field, flutter form validation tutorial, flutter forms, flutter tutorial for beginners, flutter widgets, flutter form example, flutter form

Id: GFKqoIAPd0Q

Length: 16min 43sec (1003 seconds)

Published: Sun Jul 18 2021

Reddit Comments

[u/MyNameIsIgglePiggle]

I currently have an issue that if a form element is scrolled off the screen it does not validate (or call the save function but I can work with that)

Besides putting it in a singlechildscrollview so it never disposes, do you have any other strategies?

Using a controller for each field is difficult because the form is dynamically generated