13. Form Validations with .Net Maui CommunityToolkit | Field Validations

in the previous videos we have added these fuse in the added connect page in this video we are going to work on validations right for example the name should be required email address should be a valid email address to do that we are going to go to the solution and then we click on manage new get package let's search community Community toolkit and when we do that we can see we have this community toolkit dot Maui and let's just select our project and click on install and I accept so the toolkit is installed as a nuget package right but then here it's reminding us that we need to add this line to our Maui program.cs so let's go over here and then let's add this line here and then this actually resolved the problem we have this using Community toolkit dot Maui this is automatically added for us so we just added this line which is indicated in the redmi file so we initialized our toolkit in there right so this is for initializing the toolkit let's close the Remy file coming back to the added conic page so how do we use the toolkit in the toolkit they're different of course they're different things the ones that we are interested in are the validation behaviors so for example the name should be a required field right meaning that it cannot be empty so for that we can come over here under the entry like within the entry we can say entry.behaviors right so this is this is part of the community toolkit that we just installed and then uh we can then use toolkit this namespace does not exist right so we can create that namespace here just like we created this extension name space so we need to do a XM XML namespace colon toolkit you don't have to call a token you can call it whatever you want but here we need to refer to the toolkit right the more we took it that we just added and then here we can use toolkit colon and you can see there's different behaviors right um there's even the animation Behavior you can use for animation but today we're going to cover some of the validation behaviors now first of all four required field we can use the text Behavior which is at the bottom right text Behavior and then you can close it don't have to close it this like this we can close it just like this there are several properties in here to make this text validation Behavior work like a required field validation Behavior we can just set the minimum lens to be one right so at least there has to be one character right um another important property here is the flags so this configures the behavior of the text validation so do we validate on attaching do we validate on focusing of the entry field or do we validate on value change I would suggest to validate on a combination of both attaching right so you can do a comma and then validate on value change so this guarantees that in any scenario it's going to work for example let's say this is a add contact page so when you come to the ad connect page all of the views are empty so you're looking at the name field and if you don't even touch it if you only specify the validate on value change flag here then when you click on the add button or submit button it's not even going to trigger the validation because you didn't even change anything you didn't even touch the field so the field is not dirty it's not going to actually trigger the validation at all that's why we also need the validate on attaching that means that when the validation behavior is is attached to the entry field it does the validation already right which it will see that the field is empty and then it will know that it's invalid so we need a combination of this right and then in order to reference the validation field we need to give it a name so we can call it name validator another important property I want to mention but I'm not going to use today is the regular expression pattern property right so you can use this to limit the format of the text in the entry field so let's delete this okay so we're saying the name is a required field right so so then how do we spit out the error message so for that we can go to the code behind let's go to the code behind and just before everything in the update clicked event handler we can then say if if name validator is valid there is it is valid or is not valid so if it's not valid then we're going to just return right but before we return we can spit up the error message by saying display alert and then the title is error the message is name is required okay and then you say okay so this will help us to validate the name so let's give it a try okay the application is running and let's go to one of the contact and of course you know we only apply the validator on the name field and there is a value in here so it definitely is valid so let's actually give it a try click on update nothing's happening it's valid so let's go back and then let's try to delete this field delete the name field and click on the update now the area is showing it's complaining that name is required so now let's go back and let's put some name over here let's just say whatever name and then click on the update button again now it's updated we can see the updated name over here and then let's go back and fix the name okay that's a simple validation so let's add another one which is for email validation so let's go to email so when we look at the email address of course we may think we need multiple validation behaviors because the email address may be required right for a contact application maybe email address is not actually required but for demonstration purpose I want to make it a little bit complex than name right let's say that email address is required and of course email address format has to be correct email address format right so for that we actually have a thing in the toolkit that is called multi-validation Behavior so let's use that right because that one um within the multi-validation behavior you can combine different validation behaviors so in here again we're going to say entry dot behaviors right and then within that we're going to have toolkit and then we're gonna have a multi-validation behavior okay and of course we are going to give it a name we need to reference that I'm going to call it email validator and the flags will be the same so let's copy these two and then within the multi-validation behavior we can have multiple validation behaviors so the first one would be the text validation right so let's copy the previous tax validation Behavior over here and then let's remove the name because we don't need a name for this right so this validation Behavior provides us the required field validation and secondly we will need the VMO validation behavior and or same Flags inside multi-validation Behavior there's a way to provide error messages so to do that we're going to say toolkit dot multi-validation Behavior dot error message right and then here uh in the text validation Behavior we can just say email is required right and then let's copy this over to the email Edition and the message would be different um email format is invalid and now we're ready to go back to our code behind to trigger the validation for the multi-validation behavior and for that we are just going to use the same way I'm going to say email validator if it's invalid then of course going to return first and then before that we are going to Loop through the error messages of the Maori validation Behavior so for each error in email validator Dot errors you see it's a list of objects but it's actually a list of string so for that we can just display the alert and we can just play multiple alert or you can combine them together in a string builder for example and just display everything in one display alert in one alert but to simplify this I'm just going to show all of them one by one so error and then we can say to string so this is the message and then the cancel button is okay all right so let's give it a try okay let's go to one of them so of course I have a valid email address already so let's test this let's delete the field and then click on the update button this is the email format is invalid and then also says email is required right so it speed up all of the error messages that we are expecting so let's say I'm going to put invalid email address a b c so click on the update now I see email format is invalid click on OK you can see that the required field validation is not triggered anymore so I can just provide a email address click on update button going back you can see that my email address is changed validation behavior is not triggered so everything works correctly so this is what I want to show in this video I'll see you in the next one

Channel: Frank Liu

Views: 4,540

Keywords:

Id: sNter79tWb4

Length: 11min 59sec (719 seconds)

Published: Tue Feb 14 2023