Real-World Input Validation Scenarios with Xamarin.CommunityToolkit

while browsing stack overflow today i noticed this question that had to do with the xamarin community toolkit and input validation which i just made a video about but this was kind of a more specific case a more real-world case so i decided to turn that big answer that i wrote there also into a video for your reference and that you also can benefit of how this will use so in this video we will see how to trigger that validation through a button work with it with through mvvm and data binding basically you will see a whole bunch of things and after that you can all review it by playing this video again or just reading that answer so let's just go [Music] first let's check out the um question that it's all about this is stack overflow for the ones who don't know it who am i kidding everyone knows this because this is how i retain my job this is you know where i copy and paste my stuff um and so xamarin community toolkit input validation connect with button i started looking over this i have a simple form where user adds email so entry with the behavior multi-validation email validation so if this is one validation i'm not sure why it's multi but you know um you could you can do that uh maybe he this this person wants to add more um and we have a button with a command so it's not really clear if they want to you know check it actually at the command that's something that you can do with the code that we're about to implement definitely uh but i've shown a couple of ways how to go about this from either your code behind or with data binding so let's go check that out and make this a more real world sample of what you can do with these input validation behaviors um so a little little spoiler alert um i'm going to scroll over the answer right here that i've created um i will link that in the video description so you can read it you know right after this video and i've done basically three ways so through the multi-validation behavior because you know if you have multiples then you want to check the valid state of all of them through the email validation so just from this one validation behavior maybe you don't want this multivalidation thing and you just want the email one you can do that too or through data binding because i noticed that they already had data binding going on here and for the command here so maybe you know you want to do it mvvm style and through the data binding if you want to know more about data binding please check out [Music] the other one the video that's popping up on your screen actually it's a playlist where i have a couple of things on data binding and if something's not clear to you please let me know in the comments and i'll make a video to explain that to you that's how i work and through data binding so we're going to see how to do that little validation thing as well too so you know you can read this you can read this afterwards but i'm going to walk you through it so the first thing i did is copy this entry and take that to our little ide that's called boom visual studio for mac 2019 you can see it running our file new xamarin forms application on the left also works on windows you can see it running in the ios simulator also works on android we love it all so you can just do that let's update our title first and make it input validation sample again because the first one was that too hot reload takes care of the rest and will show me the output immediately and i remove all of this whoops there we go and format this a little bit nicely by the way you can do that by pressing ctrl i in in visual studio for mac so there's that you can see it doesn't know these behaviors at so let's first add that namespace so we're going to go to the top here say xmlns xct is oops xct is um toolkit oh oh i didn't install the nuget package yet okay so let's just do that go to our solution manage nuget packages search for xamarin community toolkit here we go at the time of recording 102 latest table version add package i'm going to add it to all of my projects right here technically if you're just using the behaviors that is not entirely necessary you can just do it on your shared project but you know you're probably going to use more of that sweet little toolkit so why not install it on all of your projects while you're at it this is going to add the packages it's going to take a little bit maybe it's done it already for this one toolkit there we go boom save that and we've got the toolkit and we already see the entry right here so why is this still not happy probably because i'm installing things while running that is a pretty good reason so it didn't update this thing yet alright so let's see flags we have the flags validate on unfocusing that's good i explained that in my other video about the input validation you can have a couple of flags that you can use to influence whenever the validation is happening so you can really customize that so binding email i'm going to skip this right now placeholder email that's good i'm going to give this a little margin of 20 so that it looks a little bit nicer so here we go all right so the first thing i wanted to do is show it with the multi-validation behavior so what you want to do then is do the x name and let's say my multi-validation here we go save that and now we have a variable name that we can reference it by so let's add that button that was talked about button and to make that text validate uh multi validation behavior there we go so we know which one we're going to do our clicked handler of course so there's our button and let's copy and paste that one and let's say our email validation so that we're prepared for the next one create a new clicked handler there we go so we have two buttons that we can trigger now and you know in that light let's also give this one a name already uh my email validation something like that so there we have it we can do all of those things now actually let's just stop this because i'm going crazy over all these squigglies let's add a few breaks here so it's a little bit more clear because of the big fonts it's a little bit of a mess so we have the multi-validation and if you've watched the previous video you know that we can you know aggregate the errors of all the behaviors that's in here in this case it's just going to be one but you know you can have multiple so the is valid is valid property of the multivalidation is going to go through all the validations and whenever they're all true whenever they're all valid then is valid on the multivalidation will be true too if one of those behaviors is false with the is valid then is valid on the multivalidation behavior is going to be false as well that sounds logical right so what you want to do then we also have an errors property here that you can inspect for all the errors inside of this multi-validation and to make use of that you want to go to your email validation in this case and we can say xct multivalidationbehavior.error here we go we already have it and we can say email is not valid there we go save that and now whenever this one is not valid it will propagate this multivalidation error into this multivalidation behavior and it will add it to this errors property because that is a collection of objects to be honest i don't know why it's objects i should definitely look into that i would expect it to be just strings because it can only be strings i think um but you have a collection of all the things and you can show that to your user like hey these are the errors that you need to fix for this to become valid um so that is pretty cool now if we go to that button clicked so let's go to the code behind and let's say this is our multi validation there we go multivalidation and this is our email validation and we can say here on our button click so this is the multi-validation one and we can say if not my multi valley and i'm not sure i probably need to save this and just copy this name here my multivalidation is is valid for some reason the intellisense doesn't pick it up um and else we're just going to say um we probably want to make this a sync so we can use a weight display alert hooray um all valid okay so this is this is our happy path right so whenever this is valid we're just going to say hey all valid all good uh whenever this happens so let's maybe build this a little bit maybe it picks it up then whenever this is not valid now it still shows us errors but it seems to be doing things i've noticed this is kind of a previewed version of visual studio for mac so i'm going to trust that this just all works and we can say whenever this is not valid i'm going to get a error builder which is a new string builder so whenever you're doing string manipulations you probably want to use the string builder why that is you have to go look that up because working with strings can be pretty inefficient so go check out the string builder and then we're going to say for each because it's an object in errors like i mentioned in my multi-validation dot errors we can have a look here so it's a list of objects again i need to check why that is and i'm going to see if that is an error so if o well let's make it error that's a little bit better make it error if error is string which it should always be in my opinion then we can say error builder dot append line and here we go we're just going to say error dot to string there we go so this should add our strings and we have a well a big string builder of the multiple errors if there are multiples in this case it's just going to be one but you know this this will show you the the real world example as i promised and what we're done going to do is await display alert error and we can say the error builder dot to string which will compile all the strings in here and we can say again okay and we can do that so this is our multi-validation scenario i'm just going to leave that here i'm going to show you in a little bit so just remember this one i'm going to implement the email validation as well just so don't that we don't have to stop and start our application each time so let's go over to the email validation here as well and i'm going to again use that alert so let's do this and but here i can do i can basically copy this one there we go do it like that but we're not going to do for each here i can just say my email validation is not valid so here i can just say okay error email not valid right because i know this is in the email field because i'm checking the email directly so this is this is how to do that right so whenever i run this now let's see if we can do that then we should see you know whenever it's valid uh we should get the hooray and whenever it's invalid we should see either you know our error coming in from that errors object or we should just get this one so let's check the multivalidation one first i'm going to type in blood bloop it's going to auto-correct it to something weird and i'm going to say validate and it's going to say error not valid so we can see sorry email not valid there we go but whenever i do you know um have a valid email address then you can see it actually says hooray all valid so you see this is this is the right thing so the same for the normal email validation one if i do this is this then it says email not valid um and whenever i say again uh a valid email address and it says hooray all valid see so both of these now work um we can say you know it's not valid it's valid uh with with different things right so um if you would add multiple validations in here that the top one will still work and you would get different um error messages depending on what you input there so that is really cool so then there's one scenario left with the data binding so for that add a little bit of more stuff so i'm basically just going to copy this entry and put that down here at the bottom and oh that's too much at the bottom i should put it inside of the stack layout here we go and what i'm going to say is not use these names because we don't need that for the binding here we go not this one and actually let's just remove this multi one as well again you can do this like on the on the multi thing as well the exact same thing that i'm going to show you right here and you can bind to that error collection as well so you can do all those things but i'm going to show you this email validation one then we don't need this error too but what we do need is say is valid and i'm going to bind that to the email valid property so let's do that and we have this one so now i have this and what you can do is create a label and give that a text where it says email not valid there we go and we can say is visible binding email valid i named it there we go and do that so and what we do need because whenever is valid so is valid is going to be true whenever it's valid but we want to show this whenever it's not valid so we need to invert this little thing right here so what we want to add here is a converter and we want to use a static resource uh which is going to be invert bool there we go converter there let's name it like that and we need to add that to our content page content page so i also have a video on the resources i have a video on these converters i think so go check them out i will pop up one on your screen put it down in the video description so check it out if that's what you still need to learn and resource dictionary here we go and make that xct dot inverted bool converter there we go x key is what did i name it copy paste there we go so what's this going to do is whenever the value of this email valid changes is first going to go through this converter which simply inverts the bool so whenever it's valid then it's going to be is valid is going to be true and then it's going to convert to false because we want to show this label um the exact opposite of the is valid thing right let's make this text color red so it's extra you know clear that it's an error then what we need to do in our code behind we need to add a public string well not a string a boolean email valid get set there we go actually we need to convert this i'm going to right click quick actions refactoring convert this to a full property because i need to manually trigger the is changed properties change notify property change that's the name that i was looking for so let's do this this this again this is a little bit of the data binding stuff that you need to know so if it's not entirely clear what i'm doing here then let me know in the comments and i'll do that video on property changed on what exactly am i doing here but this basically lets the ui know that the value of email valid has changed and then it knows that it needs to update the ui and flip those bits around so let's do that and of course to make this all work i need to set the binding context to this to to make sure that it knows that this is the object where we need to actually bind to that email valid thing so okay do i need anything else i don't think so i think i've got it all so let's see if we can run this again and while this is running i picked up a little trick i didn't look into it yet where they mentioned that i do not need to specify this converter in my resources because you know we've implemented a certain way in the toolkit so the toolkit was even better than i actually know myself and you don't need to add it here to these resources i'm not sure how to do that but i will find out and whenever i do i will make another video of that or teach me something and tell me in the comments how to do it and i'll still make a video on it alright so here we have that email and as you can see the label is not showing up right now because you know this empty state is apparently something valid but whenever i enter here something now it comes up and it says email not valid because this is not a valid email but whenever i do this and say blah.com then it disappears again because it's valid and it goes through that converter inverts it and that's how to do this with data binding of course you could still add that button with that command and check the email valid so i don't have to bind this to the is visible i can also check now the email valid whenever i trigger a command and read the value of that is valid see if it's false and then you know set maybe some other boolean or still show that dialog if that's what you want but that's how to work with it with data binding and mvvm hopefully this will give you a little bit of a deeper knowledge on how to work with those input validations how to work with that multi-validation behavior how to work with that email validation behavior of course um it's not just the email validation behavior you can use any validation behavior that i've done here it works with the same principles that error thing the is valid boolean you can do all the things so now it's up to you to you know make it look pretty that's something that i typically cannot do and implement it into your own application let me know what that looks like because i'm very curious you always see the apps and the beautiful things that you're creating other than that please like this video if you've liked it subscribe to my channel i'm sure you already did but just double check maybe click that subscribe button click that little bell so you'll be notified of new content immediately and maybe if you're already subscribed you can consider becoming a member of this channel and supporting me a little bit with all the things i do i would very much appreciate it and with that the only thing i can still say is i'll see you for the next one and keep coding

Channel: Gerald Versluis

Views: 3,014

Keywords: Xamarin Forms 101, Xamarin.Forms, xamarin tutorial, Xamarin Community Toolkit, Input Validation, Xamarin Community Toolkit Behaviors, xamarin.forms tutorial, learn xamarin forms, XAML, xamarin.forms, xamarin, visual studio, xamarin forms tutorial for beginners step by step, xamarin forms tutorial for beginners, xamarin input validation, Xamarin 101, xamarin.forms behaviors, xamarin tutorial for beginners, xamarin forms tutorial, Real-World Input Validation, xamarin forms mvvm

Id: ZDUWWeAg8PI

Length: 20min 6sec (1206 seconds)

Published: Thu Feb 04 2021