Burke Learns Blazor - Custom Validation with Blazor Forms

[Music] m [Music] m [Music] all right happy Friday Burke happy Friday we're back this is really this is like saying don't say elephant or don't think about elephants like they're right there it's really difficult I'm gonna down this whole box in the span of this live stream all right so today ambitious topic yeah and let me just say I'm closing tabs is there way to close like every tab but close other tabs you can in Visual Studio hey while you're doing that let me share my screen I'll just talk about what I think we're doing today okay um and I'll introduce things so add to Stage cool this is the URL list it is an awesome website it is the current version is built with view Azure storage Azure front door Azure function it's a bunch of stuff but it's five years old some things are broken including uh login with Twitter super flaky also we'd like to have support for other logins um I've got some feature requests I'd love to add in but I can't really add them in yet when you know we couldn't deploy the the code whatever so there's that um we have been working our way through we've done all this stuff we're rewriting it with blazer static web apps the new kind of hotness everything all hooked together got a basic working API um we've got to finish the edit page which I guess requires some validation um we do we need also some oth at some point for the back end I've got some I've got a PR hanging out there with API unit tests kind of started some refactoring on it um so yeah so yeah that's I think uh Jasmine that's we're hoping to shoot for is validation um yeah and there's different ways to do it I mean I was looking at so here's my poll request if you do any backend stuff um ignore the thing about it failed because it just couldn't deploy to a stat a staging slot gotta clear that out um I was looking at this a bit for custom validation and then there's this kind of stuff here but are you ready to you got your tabs cleared you ready switch yeah let me let me change my resolution so don't cool welcome to Cuba how you doing what's up um yeah this is gonna be fun and by fun I mean something either fun for us or fun for someone else watching us fail at this but I'll go over what I've learned about this in the past week and we'll take it from there because I'm I'm almost there but I'm not quite there and so sorry about the Inception all right um it's not shared yet oh not shared yet okay yeah you can go ahead and throw it up let's talk about it but I still don't see your screen as available to share oh sorry that's your screen my [Laughter] correct tire screen here we go oh wait like we got to we got to share the system audio because we need our music I got to have yeah yeah yeah so share screen Tire screen I think this is this is also the part of the thing where we both complain about being super busy this time of year oh my gosh I've been all netc and net 8 release all the time I am yeah I am just beat man yeah like when is Christmas gonna be here uh that's where I am already all right let's go here yep I'm just going to bounce us around the screen like we're playing pong or something see cool cool okay all right so let's here's the deal what we're trying to do and let's uh open a new window here on this or you got to click on hide the streamyard block at the bottom my bad my bad no one else would notice it but it would drive me crazy as you can see it's working real well um so Timmy has a good question here and I have a response name model does not exist well I true but I can fix that okay I'm getting good at C okay you're writing a lot of C these days I know all right the whole thing about the scripted Banner is because at the beginning we would say like here the title of this is custom validation with blazer forms and people will search on on YouTube custom validation Blazer forms and they'll find a result on the net Channel and they'll come watch this expecting a cool quick tutorial is that what they're gonna find today B and be sorely disappointed exactly they'll one they'll ask for a refund they'll want to speak to the manager um all right so can I eat during a live stream chat is that rude I don't know what the rules are they don't some people live stream eating like a whole pizza or eating lots of food maybe maybe but then you're like tuning in with the that you're going to watch someone eat right yeah well think that should have been in the show description we should do that sometime we'll just eat for an hour and a half yeah I could do it be like a dinner party it'll be a so here's the deal we need to do two kinds of validation on this field here okay just to remind folks of why that is let's go here okay okay and then we need to do do some validation here which makes sure that number one the URL actually isn't taken and we do that by calling the API and asking for a link bundle by this particular vanity if we get one back we know it's not available you can't have it and why do we do this because it's a nice thing to do for users otherwise they got to try to publish it it's already taken publish already taken right it requires a lot of manual labor the other thing that we want to do is we don't want to let them do put things in url that we don't want which you could argue that you should be able to do this or definitely this but you know you don't want to let people do you know I don't know what's an invalid URL character well I don't know like there's probably there Unicode things yeah we don't want to let them put anything up there so we need to validate this so this one this one actually isn't too bad right um MH but the this one is this one we definitely need to do before they hit publish now question does it need to be a validator or can it just can you just handle a key press and could we could and that might be the way to go but here's what I've done so far so according to the docs you can first the first problem that you have to solve is that this the the input text only validates on submit it does not validate on input and it does not set the value of the model on input and so what the docs say to do is create a custom component which I did here which is not very complex and all it does is it does it sets the bind event to on input as best I can tell that's all this [Music] does and then in when you actually use it here [Music] um instead of on submit it will it should fire this event on well sorry it all it does is it sets the model value on input and this is kind of where I'm stuck because you still have to do uh the on submit in the in here right so it's like don't want you to do this we don't actually want to do this we want to do it on input here so the other thing that we have to do is we need a custom validation the reason for this is that there's only like you have to specify the kind of validation that you want to do in Blazer and so if we look at new link the one that people are going to use the most often is this data annotations validator and in our scenario we actually could use the data annotations validator um to an extent so here we can use data annotations to make sure that the URL is valid so let's let's jump over here to our link bundle yeah our vanity and we could add that here yeah data annotations are pretty cool so you put an attribute on the property and you just say like this must be this regular expression or it must be a string we did that here right yep the problem is in our case is that we need to call an API and do validation and then come back and set the thing is invalid so we need to intercept we need a custom validator because if you don't tell it what kind of validator to use it won't validate anything because it doesn't know what you want to use to validate y so instead we use this custom validator that we've come here are you let's pin this thing pin it pin it pin it um hey Visual Studio does this thing where it like puts tabs on the right hand side what is that wait you're in I know but I was in Visual Studio getting ready for this build AI tour and I noticed like it put put a tab on the right and put some on the left so what it what that is normally is it has this concept where when you work with a tab or you open a thing it it opens it like it's a kind of temporary thing then when you go go away or do something else it'll close so it's like the tab Management's gotten a little bit complex in Visual Studio like I think in a good way but it's like um yeah so I honestly don't even know like what it's doing half the time I just know like when I'm looking for a tab that's there all right I'm gonna zoom out a little bit I hope that's okay chat but yeah and I think you could stretch it to the right too because you've got the the browser taken up half the screen boom there you go boom yeah um collapse uh okay I can I can mump this back up what is this I click on get me out of here okay all right this it go back here we go no not this I don't want to pin this why did I do that get out of here I want a different I want the link bundle component no it's link details yeah so I'm just throwing this out there I think what you're doing is awesome I still do wonder about if you want to so there's two concepts here you don't necessarily need to validate until you submit the form and you could do a Onkey press just do some checks you know like check if the link exists check if it's like basically do your lowkey validation okay mean yeah we could get this out of here we could take together I'm just throwing out like you could say when you when you type a key on the text box it could say like go do this check and then if it is like I don't know if you like manually Mark the thing as invalid or if you just say set the class to whatever you know but the thing is we can't use regular inputs inside of an edit form [Music] right no you can't but can you still attach can you do um you can still like basically intercept a key press press on the edit thing the input text input text yes so this is how I tried this originally was let's you know what let's just change it so we'll just like um and on input that's what I was thinking yeah validate vanity URL and then down in validate vanity URL this actually changes and it's like event are event what is it is it event ARS the change event args okay and then what you can do is you can say you can check the event args so you can look at it and say um here you can here you're looking instead of at the model you're looking at um e do yeah Str so what's kind of I mean as a as an option then you don't have to kind of hook up custom validation stuff so much because all you need the validator to do is prevent like actually submitting when it's done you know what I mean like when yeah so we're gonna talk about why this won't work here in a second let's do it because it kind of works but not not fully okay this is great all right I know I'm wrong I just don't know why yet uh so this is the one that works one that does not so let's [Music] do and let's make sure here's our validation summary that is right and we've got our custom validator we do not where's our custom validator I take that out [Music] give me an update was that not a was that not a rude edit yeah see there it is so we're already working now here's the problem John uh oh in this scenario here which we used in edit form uh oops I needed to I could have just done it right it adds a class to this element when it goes when things go poorly okay it actually adds this invalid in this case though got to get back in this case though it's not doing whoa my screen just yeah completely died it's not doing that right so if we look at this uh that's not the right on help me out it's still marking this field as valid because it doesn't know like it's validating the value of that input but not the model doesn't know that this is not you see what I'm saying yeah but could it can you just manually change that class like can you just could I could that's not the right way to go John well I'm not sure about that because basically like I kind of think of this it's similar to when I'm submitting a form and I do client side validation and server side validation right so I like do a couple of levels of checks so first I'm doing this like lowkey easy thing like you know it's like when you go to the airport and the person at the front of the line checks do you have a ticket and an ID whatever and then you go through security and they actually really check you out you know and they just waste your time because like 98% % of stuff gets through anyway yeah but the person you know occasionally somebody's going to come to the front of the line with no ticket or something and then it's like hey get out of here with that weak stuff you know until you actually even have a ticket don't don't take space in our line your mic's real real low for me chat is John John's mic low I don't know turning up my audio just I just have to get up on the mic that's better yeah okay you got to Elton John that bad boy I'll ever seen Elton John how he sings like he literally his mouth is on the microphone that's what they say you're supposed to do apparently so I mean I don't think I don't think it's wrong to like Mark something as invalid before you run the full the the full validation is just hey I'm ready I think I'm ready to go let's submit this bad boy and then you run it through the validator [Music] better okay so we can do that right so we can make a custom class here let's do that and then we'll go back through actually what the hell is going on here including this right here no I'm not saying I'm right and and what you did is wrong if you got this going with custom validation and you're happy with it that's totally great I'm just saying like there's different ways to build it kind of right it's like it's kind of works but but not not not totally um I needed to do that really we just need to add a class there to do that I don't like all right okay so let's let's do it let's do it the way you suggested just to get it working and then like when Steve Sanderson comes on here yeah we'll make a list be like what is this hideous validation I know because there's a lot going on here I actually don't think I need this let me just check and make sure that's the case we're validating a string that we're good leading code feels amazing so let's create a then um oh sorry I forget string that's that and then here we want to say we're going to say it's valid by default okay and if actually this should be an enum probably valid or invalid right you only got two choices yeah it doesn't I mean yeah I guess okay and then here what we can do is we can say right if it fails the validation we can set that class right and co-pilot knows actually should do it here because this is where we're displaying the error so let's do it there and then if not we'll just clear it because we're clearing everything here we'll clear the class um so for anyone that doesn't know debouncing is pretty cool that's so like you don't want to run the check too many times right so you're kind of exactly exactly and I'll get into that in a sec let's just see if we can make this work but yeah that's exactly right um and then here it's just like valid class so Timmy's asking for clarification what exactly are we validating we okay so right well nothing right now because we got we got serious problems we got errors but what are we wanting to validate is this those two things that you were saying that it is an available URL so first we want to make sure that you can't put just anything in here can't put garbage right we want to control what you put in this box and the second thing we want to do is we don't want to let you pick a vanity so this is misleading okay that's it's a vanity it's not a link title yep it's already taken right and when we if I was to open the dev tools here like let's look at this and let's go to the network now watch when I when I put this in it's gonna make a call let's see not there okay see it makes a call and the server says 500 I don't so that's not right like we need to fix this in the API let's so test one actually returns a valid response so we know that we can't do that right like if we do this it'll check returns of 500 and that's how we 404 is what it should be returning okay which is means we didn't find we didn't find that URL so you can have that how'd you get the 500 before I don't know something ain't right it's broken because look test obviously is a taken URL one of the first ones we used so my guess is there's multiple in the database somehow and it's just failing because it can't it do not set up to account for that okay answer the question I think so okay so let's figure out what is happening here you gotta promise we will talk about debounce at some some point we are yeah we're going to talk about all that as soon as we make this work all right set attribute on element is not a valid attribute name [Music] H it's just this right here right that batt [Music] clo right what are you calling set [Music] attribute this could this could be one of those stop and restart the watch I think we're calling set attribute here no I don't know all right control Z your way to freedom and the editor has it ain't happy uh Gone nuts let's just while we're here we'll just reload great I've been sending these errors to Tim so this is [Applause] good him watching can we get our our PM for the C no C dev kit on here to watch the stream every week that' be cool surely they have nothing better to do on a Friday okay wait a minute the parameter I follow him Ona he's always mountain biking all over the place oh gosh so component attributes do not support complex content mix of c and markup attribute class text okay why not component so I think maybe you need to do like the ADD and then put it in parentheses or something you need to maybe bind it differently valid class not vanity class thank you there's some sort of funky markup you got to do you're missing double quotes it says I don't know about that where oh wait I am yeah look at that thank you very much Zaki yeah this is not right um let me how do you B but you know binding in a quoted thing this works on htl HTML messages let's see double quote class valid that's what I did I did you did maybe it was that double quote then maybe and then I led you with the parenthesis I don't think so but let's see yeah mixed C and markup attribute class so you could a Cheesy way to do it is like you can do parentheses and you could like write in the other stuff as C string oh these other classes yeah but that's awful okay class I'm gonna google [Music] this um okay I don't know why they don't because that seems like a common use case yeah um need to read aack overflow okay what are they saying to do on click increment score yeah but that's change class [Music] names looking up John Hilton he's usually a good one attributes do not support complex [Music] here's one okay people are telling us we need Capital C Class what Dan Roth is in here let's see class form control okay so check out the comment I got up here right what you got I can't see I can't see I can't see okay Capital C Class what's the comment what does it say uh it says you can't use input text lowercase class you have to use input case uppercase class because you're using the built-in field and it doesn't support propping to the HTML class field directly that doesn't look like it's the case let's try well did you try what it's still not working it's not working okay I mean well we're all it's so we're all it's confusing I still think you do want that Capital C class though but let's see I find myself doing this which is exactly what we're saying but it's you want multiple classes and you only want to bind one of them so that I think is where I would do the at parentheses and I would do the one thing plus the other stuff yeah okay look like class equals oh my goodness yeah so this is an an idea I'm not sure if you can use this interpolation but this is an idea yeah the interpolation would work so this is an open issue what does Dan I found myself doing what does Dan say but I'm curious currently this issue is in our backlog with no committed time frame to address it damn unacceptable unacceptable okay yeah we can interpolate because I don't think we have a choice so so it's just dollar sign uh the dollar sign is before the quote well first of all we need to do this don't we um I'm not sure because when it's capital c um maybe they using here dollar sign quote I think because we're input taex you need to do cap capital c I'm still believing what Timmy said see here in a minute so then we're going to do all of this stuff and then this then you put that in the curly brace yeah and all of this is because we can't get the thing to validate correctly which I hate so much input LS of okay so maybe maybe maybe maybe okay I got a good feeling about some of this no man we canot beat this thing class input valid class is it do we not need can we just do this now that's what I'm um okay well no that's not goingon to that's not good you can't escape a quote like that I think you could get rid of the first quote before the dollar sign um negative this is Tiny text this is I'm I'm embarrassed honestly this sh uh Blazer input text uh input text class binding okay no input text see it like I get a lot you get a lot of input stuff here you gotta say no I want input text yeah which is what I said didn't I say that I said input text so Zaki is saying why not model valid text but this is I sent Burke down a a road of difficulty but this should be easy you know well I hesitate to say this I think you can have more than one class tag on an on a you could have an uppercase class and a lowercase class what happens if I do this allow this okay it will allow that so then create you can create the whole thing on the I could but there's no reason we can't inter like this is valid C here right so we should be able to say maybe it's like this no I don't think so no I mean maybe that's usually for a Handler we say not a property can you do um so putting that in parentheses does that work at parentheses valid or valid CSS primitive so can we then say valid CSS plus oh yeah okay try that I was goingon to say you could just do valid CSS plus quote blah blah blah yeah but I'd rather interpolate because it's nicer but will it whoa whoa who whoa easy take it easy this is so silly um okay so there come on give me okay yes that's promising oh we haven't wired that up yet okay okay what is gonna happen nothing that okay come on now I got man oh did it not workp is it working class invalid it is working okay oh there it is I got it backwards we have it backwards don't we no so it's valid and then I put in this it's invalid no it's still valid it did not change it's not changing it until we leave and then it changes it so that's the actual validation it's not it so you no no no it's not updating the class it's not updating the class until we leave so what fires that event it's here okay so what is calling that method I think we need to do notify state has changed it's like a do events no does it doesn't when you leave too though why does it do it when you leave is it is it resetting the class so when you leave the thing then oh so that goes away it's it that's the debounce thing right no okay like look I just took it out and it didn't change oh it's that validation shouldn't be in the debouncer yeah right here it should be in the debouncer boom yeah boom okay so also let me just check that it goes out on blur it doesn't need to why does it do that it does it twice because it's angry it's like I told you it didn't do it twice the second time it did it again it removes the it's like come on Burke get it right I think it's just a little more emphatic that way but it removed the message went away but this did not go away because the validate because you've got a validator and your like little custom class setting here's what we need to do here's what we need to do I have this I have this yeah Gregory white you you could manually call the the event when you leave look it I got it I got it oh and then we're gon to talk about oh no gosh why is it doing that that doesn't even make sense okay so wait a minute what's it's when you leave the field it shakes again not every time so look okay that's right let's leave fine okay now let's go back now let's leave again it's still fine take it away let's put it back tab out what's going on that's there we go I think it's the debounce I think you're right so do do you need I don't actually it's okay it's okay we I don't want to debounce this that's what I'm saying you only want to debounce the the one that's making the API call that is exactly right cool okay we're good which case because you can you can validate immediately on key press the only thing you you're worried about debouncing is the yes you were ex you were right John apologize okay oh rude edit rude we have I feel like we're we are doing The Impossible here hey I mean things are happening the only thing is like feel it slows down the typing here CU it's like doing a bunch of checking but you know what are you going to do oh it's still doing it though that's so weird okay so if here's the thing you need to not oh so you have no debounce happening no I'm taking it out no debounce okay is something causing it to fire so I feel like now it's like one second unacceptable so what is happening here first of all let me take this out for just a second because I'm not 100% sure about that seems good you can't break a b it's perfect I just did it just did it though y'all saw it there it is okay what can you describe what you're doing that's breaking because I'm not see saying anything wrong yeah so what I'm doing is I'm just so for here right this field is invalid it has an app sign but it thinks that it's valid um right because you don't see the text text is gone oh so you're talking about the validation message right so I think um and it appears to be strict timing yeah let me try let me just make sure the debounce is out here and let's just let me just and then we'll just kind of like enter this as a bug yeah I think yeah because it feels like that's that's a hard one to reproduce you it took you a while I feel like what's important is when you click publish like it's shown you the message you're able to get the validation message to go away as long as when you click publish it shows that validation message again I would know what to do like when I'm filling it in you know and it shakes again so it's like it's it removes the class it's valid so then it should remove the class and then it adds it back it adds it back does it I wonder what the class can you inspect that in the browser tools I wonder if it has both like valid and invalid or something oh valid see it has valid and invalid ah it's in a Quantum State the heck did that happen I feel like the validator is Now setting it yeah correctly um am I a liar did I tell you something that wasn't true at all hold on let's I don't want to do that I wanna it took us so long to get that working and then we don't need it at all are you serious oh I know why it's happen happening I know why it's happening because when we Tab out it actually is it's running the validator yes because the edit form is doing that and you when you Tab out it get causes a key press event and a validation event but why it shouldn't set it back to Val in to valid what's setting it back to valid so your validator is separately setting that valid class right where's your validator thing custom this doesn't this is like a generic class it doesn't actually do anything right it's just like there's no logic in here at all the logic all happens here it adds an error and if if there are any errors and it adds an invalid class I [Music] think [Music] so I think the input text built-in behavior is to set valid or invalid when it runs validation because you have a validation set up to it right you've got a model set the model has those fields all that stuff that's why it just marked this is valid it's not valid valid okay what the heck okay so is your validator running this thing here well so that is your like that is your validation event that you've created but what about the validator is there a validator set for that element input text so you do have the model [Music] set I'm curious let's do this yeah or you could do The Good Old Log oh go debug I am don't see this much in vs to be honest so close to F to fixing this I feel like okay so boom break M okay it's invalid and custom validation clear errors yep okay and I'm GNA do oh it's gonna do this every time I don't actually want to do this I want it to be here yeah it's invalid that's right want Tab out of that field it's invalid that's right okay now we're going to Tab out not fired Okay the reason is because that method does not get called by your by the validation the validator but I'm not resetting I'm not right the only reason why it should do that is if we clear the errors so I think so your custom validation it's this method isn't running when you tab so instead the validator the input text is looking at its data attributes and all that and it's running the validation itself okay so Adrian's saying we're missing data annotation [Music] validator it didn't do it that there that time it did it um we're not using data annotation okay so here's what I'm I think I think yeah so there's nothing that method that we wrote there for the on click and stuff there's nothing to run that method when you Tab out of it oh so we need to Tab out we need to have a on blur yeah blur what no on blur okay okay yeah losing my mind um like this I think so that's weird that cannot convert from a meth group to an event call back an noop saying can we use on key press instead of on [Music] input that would catch both of them that's weird you have to do um I don't think it likes this change event args right so oh it's not change anymore it's um it's a different event args it's a different args if we take this out my guess is it's gonna like that yeah but I I need that keyboard event ARS maybe sounds good oh is that right we oh e it's not E [Music] Do Not Key I need the it's oh it's the key press I need the whole freaking value yeah so you need um there's a thing for that it's like sender it's the um but I wonder can we now do you can pass it in the Lambda syntax right you mean like this yeah yeah and then pass and then put a parenthesis after validate vanity URL and pass something in you pass like um get keyboard event ARS I don't know um my brain is not braining today you want to pass self basically is what it would be you know what I mean you want to you want to pass a reference to the input text can I just pass there like how do I specify that first parameter oh it needs to be like this [Music] um uh we can do like you want to pass yeah this is seeming too complicated object sender that sounded good yeah but what is object sender object sender and now what is it what's going to be our an object so it doesn't know okay wait we're getting some things we can just reference the model directly oh no yeah the model's not being set actually set here unless unless John check this out okay there's a lot of comments in the chat that are trying to they have some ideas too what do they say they're saying you can reference model in the Val validation method and ignore the event args but the model's not being set until blur [Music] oh oh what wait wait wait wait all we have to do then okay hold on I think I've got this okay we still want at on input okay still want this still want whoa whoa that was hot and then on key press we're GNA be um we G to be I'mma Be I'mma Be I'm a I'm a I'm a be what we're going to do is call it we're going to call a different method here we're going to call we going to change this and then our on input takes our keyboard event args and hold on with you for a second you can just reference the element itself the element has an ID right you can just say whatever. value on change we're so close change event arcs no uh keyboard event arcs so it's actually opposite okay so on input and is it on change or Onkey press I say Onkey press so on change on on key press bear with me hold on we got this we got this and then [Music] it's going to call it's going to call this every time oh I see yeah because you don't need you can so you're passing the whole string in right that's one way to do it yeah and then here we actually call the validate passing it and we don't actually need anything here anymore yeah and people are pointing in the chat we're kind of mixing some models right we're like directly working with the thing and we're also doing two-way data binding against them all yeah we're forcing the change and I realized I'm contradicting stuff I said in previous weeks where I was like we should be using the the model model but I feel I see I feel like our my custom input does this right like custom yeah already does this okay in terms of finding the model on input so we don't need to do that no it's on key press yeah that's right need add yeah there we go sorry all right all right all right all right so we don't need this anymore ideally and really we can simplify that watch that should work feature requests come on don't give it to no oh it's already in use sweet uh I don't even know what to do now like how do you oh it's because it's running here yeah okay cool we're all right come on man all right I don't want to do it you can do it bur I'm afraid also let me put a console right line in here to make sure that we're actually like boom boom using emojis should have can you wait can you write emoji to the yeah to the G nice okay I'm excited about this already in a bad State this the right hold on that might be the wrong death tool sens yeah okay so here's the tab out no event no event h on key press isn't firing [Music] anything that's weird isn't it I don't know if you want to use ghosts everywhere oh that's true I won't know yeah it's not firing oh okay it just doesn't fire on tab so I know that's going to solve our problem so that's yeah on key press well that's weird that that's an on blur right it's on blur that's correct blur I like that it's called on key press so now you got to change your event ARG because it's no longer a key press it's an element I should be refactoring stuff but I'm not I'm not doing it all a nobody got time for that humblr okay it's exciting ghost ghost it's stealing my focus steing my it's blurring the field when I hit enter when I input uh okay my custom input text I mean now we're on your you're doing your custom business yeah you're binding to on input huh I don't know if that's good or bad I'm just saying this is what the do this is from the docs but what is what is this guy doing what is the custom input thing adding for setting it's it look it's it's saying okay it's an input and the bind event on input that's all it's doing but I wonder if we could pass in okay I get it so we were using an input text element and you want to take more control of it to get right I'm overwriting it and saying this is what I actually want from you okay but why is it taking my focus is it because we're running validation on [Music] input but we're not anymore there's nothing calling that we're only doing it on blur now um the thing calling on input is custom input text on blur bind key [Laughter] binding why is it doing that doesn't make any sense so did this just start happening when we switch from input text to custom input text yes okay so I feel like that's the thing why wait how do I so you are binding to the on input which is I think conflicting with the other conflicting with what the blur yeah I mean we could remove that I think the behavior is going to be the same well we needed that yeah I'm just thinking if we're using custom input text maybe we need to set on blur in there as well oh I see what you're saying well let's try this in our custom input text let's take this let's just take this out for a second M okay so now it's never binding at all never BNS at all but but this is what is doing it yeah so I feel like we've got two things happening which is that on input is fine that's one level of valid that's our level two validator wow if it gets this I'm G to be maybe do to other parts of your code yeah yeah it's like I don't know shouldn't be doing that can we like what happens if we hey Burke when somebody says VSS code what does vs stand for visual studio there you go we got a question here all right this doesn't make any sense I feel like it is I feel like we're mixing like four different models together and they're all said like pick pick a lane [Music] so so if we just do input text oh go back like we know this works right we know yeah two degree so the only downside to this was what that it's not that we're getting that weird blur effect yes doing strange things to [Music] us so we have some options like one is we just use an input field we don't do we don't use the validators we just set properties and valida and stuff manually yeah so Julian yeah we are validating on every key press but we're kind of in this weird thing where we don't necessarily want to validate do the whole validation we just want to set indication on the on the form but [Music] okay so so now the I'm getting twisted around it didn't validate now now it's not okay maybe maybe because we're not calling I think we have to call state has changed now going way back you said you had all this basically working with a custom validator yeah we're in the same place we were when I told you that there we go okay so now now it sticks around it's like Yeah question here we're using Note 7 this is this is Blazer Inn 7 Leaves again on blur and it's not where is our where is our class we take that out it's taking it out B model equals model class oh you've got the lowercase class that's fine I think you need capital c yeah and then how are we how are we doing this before uh then you can interpolate there right right we don't need the quotes [Music] here interpolate here I think you oh yes and then a quote at the end a single quote it double quoted you trying to help so compromising exactly what does it say hold on Builder 2 does not exist model does not exist doesn't it I think you may need kill it and restart that's my answer to everything tried restarting it yeah so Anthony's asking what version we're using we're not onet net 8 yet rc2 just came [Music] out John [Music] the audio's gone for me at least okay you're back all right uh okay so so is it working no valid it's not valid it's invalid see it's not actually interpolating that thing see it has the braces valid class oh yeah it just sees it as being a string did I do that wrong I probably interplate it wrong no I did it right oh oh oh look at this us out check us out no wait hold on no that's right no it doesn't know it's not you could oh you don't have a dollar sign before the quote boom there we go that was it I saw cool just need to figure out why this is sometimes happening yeah look David had it so I was on my rant about what version we're on we're not using net we're not using net 8 yet we're on Net 7 we're running an Azure we're using Blazer static web app so we're using kind of the official release version I'm excited to move to net 8 when it ships in a month but A lot's been changing with blazer over the past six months through the through the process okay so what are we thinking so I think I think we call it right like because it's still it's obviously invalid here um I mean if I saw this form I would also think it's invalid I think the most important maybe we like log a bug like improve validation because what you really want is when you click public publish button what happens nothing right now I mean that's going to be on submit right the publish button is the [Music] submit right this is left over from type is [Music] submit all wait a minute is there like a custom butt a custom element for this in is there I feel like maybe there is laser forms oh in this case we're just hitting enter to submit okay yeah there's also there's an onv valid submit button yeah you just need a button submit it's type submit right [Music] yeah I'm going to put it up here above this just put right here need to go into debouncer because we're not doing it um oh but we did want to talk let's talk at least about why you were doing debounce so the idea with the debouncer is you don't you don't want to every single time someone presses a button keep pinging like if I type 20 characters I don't want to do 20 URL requests so you want like a little bit of a weight before pinging the server for it to like settle out you go like okay you're done typing now I'm going to hit the server yeah and it's pretty simple the debounce if we look at [Music] it it just sets a timer and basically what it does is it waits for 300 millisec well you you specify the time 300 milliseconds and it sets a timer and if you hit the key again within that 300 milliseconds it resets the timer yeah and so it doesn't actually run the event that gets passed to it until no keystrokes have occurred in that 300 milliseconds and what that does is it stops the thing from firing every single time someone hits the key if they're typing real fast cool you're just reducing the number of calls that you're making to a function by waiting for the user to pause yeah um okay so we do we are going to have a problem here John because it does think that this field is valid even when you hit publish yeah because when we tab like if I Tab out when I blur it to add this now it won't right so called it on valid submit even though you have an invalid title so what is so why aren't we using the data annotations it's as soon as the field blurs is when this is when everything gets weird yeah but okay so what I would think is the form binds to the model is there a reason we don't have data annotation validator hooked up we can have it for this specific use case that's what I feel like there that'll get that will fix this specific use case but it will not fix the case where we're actually calling the API to see if this is available right um okay that should that be a separate thing that's part of the should we recheck it when you click publish anyways we can but we just need to figure out like why is it when we blur and I fig why couldn't we do an on blur event here yeah yeah just do equals on blur and then let's create an event on blur take nothing doesn't pass event of any kind um like let me try just event ours take that yeah okay and then what is e what does e have huh that's not a lot all right it's all right we can just do this this is so hacky at this point um validate vanity URL and then here what needs to change event ARS um will it let us pass change event ARS blur saying [Applause] no not because here need to call this method or could we not do we need [Music] yeah oh I see what you're doing right getting a little bit yeah just you're just working directly off the model I'm doing it myself man all right taking over for Blazer yeah right so then it's invalid it's still invalid wait the name e does not exist oh wait wait wait hold [Applause] on we may by the time we've written all these events and stuff we may just want to go back to an input and not do an edit form so weird it's doing it again why yeah because it's it it's whenever it sets the model it removes the focus how do we set the focus back oh this is not even Timmy's asking if we're not binding to the model that's a good question oh boy gross yeah well okay so let's check about The Binding to the model and then I think we should talk through what we got we are binding to the model it's weird that we're binding to the model there instead on the form though right don't you wouldn't you normally we're to the model twice that's a little weird that we're doing bind value there and we binded the model above too I think that's the answer we don't actually need to do that oh wait yeah doesn't no it doesn't like it yeah so I feel like we should restate the problem and then kind of take some notes and wrap up for the week whoa okay that was something there looks like you have to have a model okay requires a value for Value we should B to the control not form so the form should not it's weird I mean it depends if you're binding to a complex model or something in this case we're binding to a simple field I I think that the the thing with normally with an edit form you're binding to a complex model that has a lot of properties and you validate like the entire model on submit and stuff like this in this case we're working with a single string have the model but whenever we set the model it removes the focus from this element element I feel like we're binding two things to the same thing right we're binding to the model for both the form and the element oh because it's the exact same thing that's what I'm saying so so let's like it's we' we've been going an hour and a half we should probably wrap up um and kind of like take some notes for next time okay good yes but just let me try more thing who I can't I can't stop [Music] um now it's just now just see but now it's working look look look look oh kind of no I mean it's working it's working no yeah no it's never mind all right we'll regroup I think we need to ask oh I'm I'm gone next week but okay need to ask someone why is this the case because this custom input should take care of all of the craziness and I don't know why it's refusing why it's removing the focus well and I'm gonna share out too we have the this whole thing this is open source right so I'll share the um thing in the um chat we take poll requests if somebody wants to to take a shot at this we are happy for that um yeah I love to take that PR my my high level view on this is we've got we're doing a few things we're trying form validation using the edit form and an input text but we're also kind of intercepting our valid validation at the input level because we want key press level response to the user we have a debouncer and all that my gut feel on this is we should not use an edit form we should just use a simple form HTML form with text and do our own validation and then we manage the the blur and the you know what I mean we we're not we'd be done by now yeah I think that's what we want to do because we're mixing we're mixing patterns that's what I'm saying we're mixing edit form because what what where edit form shines is a thing where you've got like you're placing an order right and you got to fill in your your name address you putting in a credit card you've got a phone number yeah we're validating one field so I think instead and we want to do it on key press and we want to debounce and all that so my gut feel is just do it at the just do it on events okay y cool so you're out next week and I don't even know things are gonna get crazier as we get near um net comp too so we get here okay I may just go in and like do this yeah the next time we get together we just be like we did it that sounds cool too all right all right you did not finish the cheit I'm a little disappointed this is a family size okay okay awesome well thanks everybody I think this was interesting I honestly I I do feel like I'm I'm learning more about like what to apply where and and stuff so certainly like I know a lot about custom validation in Blazer now there's no doubt about that like way more than I ever wanted to well and and I think it is something where like I would use it for certain cases but also knowing when not to use it is good too yeah I agree age cool cool all right thanks for help everybody I think a lot of MVPs I think uh I think Timmy jumping in with a lot of good suggestions today so thanks thank you Timmy okay it's time to bounce thanks for watching see [Music] you m

Channel: dotnet

Views: 2,549

Keywords:

Id: Qa5227uE3G8

Length: 88min 30sec (5310 seconds)

Published: Sat Oct 14 2023