.Net 8 Blazor: Easy Client-Side Form Validation

hey Bobby here from coder founder I want to talk to you about something I find very sophisticated pretty great feature built inside of Blazer and that's client side validation for forms let me show what I'm talking about if I hit this submit button here you can see that I get these messages saying that all of these fields are required for in order for my form to be submitted it also has this kind of red outline on the field showing me hey all these fields are required there's a problem here but if I enter my name here in the name field and tab off of it you'll see the message disappears and now it's green signifying that oh this value this input is valid now before this this was only achieved by writing JavaScript or using a JavaScript library to do client side validation I'm going to show you how you do this in Blazer and I think you agree with me this is easy to do and it's pretty powerful so let's look at Visual Studio here this is the the form that you're looking like in code and this is Razor syntax and so you can see right here this is where I declare my form and I'm using a component inside a Blazer called edit form now when this renders out in HTML this will be a standard HTML form but the reason we use this component here is it gives us a couple of things now the first thing it gives us or allows us to have is a model for our form and the model defines what field or what properties are going to be included on our form and these properties or Fields will be included in our validations if you have additional fields that aren't in this model while we can't add them to the form they won't participate in validation the other thing that we have is we have several events and one of those events is called on valid submit and that means that this method will not execute unless the values in this form are valid based on our rules that we have set up now to plug into the validator all we do on the top of our form is we have data annotation validator just a component we put it right here in line with our form and then in our input text right here you can see how we're binding this to the property in our contact form here and then we finally add a validator message for each control that we want to show a message for if it doesn't pass validation and we just pass in the property this message is validating for to show the correct message for the property now the properties are defined in a class and you can see I have a public class of contact and then this right here is the name property that one that we were just showing you is the public string is the name and you can see here I have these data annotators one of them is required and one of them is called max length okay and so you can see here with this max length of 50 I also have a ability to enter my own custom message I have my own custom message in here name is too long can I be greater than 50 characters let me show you how that works so if I go over back to this form here and let's say I fell asleep at the keyboard and my S key was sticky or something like that and I hit tab you can see my custom message now shows up name is too long cannot be longer than 50 characters and when I pull it back back like it was pause and delete it get it all set up now everything is right in the world again now this is valid but notice if you look at the code here this is the entire code there is no other code on this page no JavaScript no extra libraries to import it's really easy and it's a Once you understand the pattern it's fairly easy to implement and this is all we have to do is we add data annotation validator and then we pass in a validation message message now one of thing you can do is you can add a validation summary and this will show all of the messages for all the fields in one spot some forms people like this I do not just from a design perspective I like putting the messages on each field but sometimes you may want to show a summary at the top of the form or at the bottom of the form or anywhere and so that is built in as well but let's look at some other validations that are built in right out of the box now one of them right away is we have email address support for phones we also have support for ranges so if we can have a range between one and five or some kind of number or numeric value that you want to enter in um the range support works really well let me show you how that works in a real world setting so if I come over here to this priority field you can see here I have a drop down and so my drop down is a select with options and I have a display Val value right here this low below normal normal and these have numerics attached to them so if I hit High here that's going to be valid because that's the value in our dropdown is one through five and so that allows us to make sure that we save the correct value to our database or we're mapping tickets to this or something like that that the property only takes values between one and five but with something like a select option we can show a user friendly display message but behind the scenes we're saving a 1 through five so that's where that's useful it's pretty cool all right let's look at this phone number here so let's say I want to enter in a phone number and I'm using the built-in validator well I can henter a four in here and it's actually valid also can enter in a real phone number something like this 877 and that's also valid as well okay so it knows the formats but it's not always in the correct format that maybe that we'd like maybe we want to send a custom validation to it and we don't like the way phone number works let me show you how that could work I'm going to take out this phone validator and I'm going to replace it with the redx validator I've already got one set up here and I've got my custom phone Rex in here and you can see if you know something about Rex is here it's just basically saying hey I've got some braces here and then I want three numbers in there I want a space right here three numbers here a dash and four numbers and also have my custom error message here phone number must be in this format right so let's see how that could work so I'm back over my form here and let's enter in just a four like we did before and you can see here it's hey the phone number must be being the format of 1 2 3 4 5 6 7 8 n okay so I can do that I can enter in a format and now it's valid notice here if I take my space out it's not valid okay so it's enforcing that Rex validator right here and that's a powerful feature in case you don't like the way some of the built-ins work you have Rex to be able to en Force the type pattern you're looking for there's also a lot of built-in support for running your own validator functions so if you need to run code on the back end to maybe look up a database value compare it to the value that's entered in and then validate it that's also built into but notice here if I go back to the code here I don't have any bullet plate code to do this validation it's very clean I just put in the input that I want give it the property put a validation message where I want it to show up and that's it and my model will give the rules around this that what what it needs to have in order to be validated so I don't have to write any kind of JavaScript to do this or any kind of C code or anything like that this is the entire way to do it this makes our fors really clean really easy to implement client side validation by passing it a model with some data annotations on it anyway I hope you see the power in this and if you want to learn how to code in Blazer we do have a course here at coder founder just go to codf found.com we'd love to be your teacher your coach and mentor and teach you this exciting framework Blazer well I hope this helps good luck and keep coding

Channel: Coder Foundry

Views: 2,643

Keywords: coding bootcamp, learn to code, dotnet, .net, c#, programming, software developer, coder foundry, coding bootcamp in north carolina, blazor, .net 8, form validation, for validation blazor, blazor form validation

Id: eQkusddfDlE

Length: 8min 48sec (528 seconds)

Published: Tue Jan 09 2024