Advanced htmx: hx-validate

Your browser has built in types and validation on inputs in a form. But what happens when you use inputs without a form??

Note: I accidentally posted an incomplete episode at first, if you dont hear the end, try to re-download!

What is hx-pod?

Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs

Lazarus: 00:05

So the next advanced attribute we're going to talk about here is h x validate. And the actual usage is pretty straightforward, pretty simple. It's just h x validate equals true. Everything underneath that, will get that attribute, everything inside that in the dom. And then you can sort of invalidate that by saying h x validate equals false if there's a particular part of that that you want to then, you know, stop validating.

Lazarus: 00:29

So why would you do this? What is it? In general, just for some background, your browser has built in validation for inputs. Right? So you've probably put required on input type equals text and email or something, or type equals email is another one.

Lazarus: 00:49

So what it does is those the browser is working to validate those before you submit them. It's just on the front end on the client side. You just sort of get that free as part of, you know, your, your basic inputs in HTML, HTML 5 or whatever. It has this validator API. So you've probably used those before.

Lazarus: 01:13

So, why is this necessary? Your browser is already doing that. H t m x, if your inputs are already part of a form, then h HTMX is already just gonna use the validation, API, and your browser is gonna use it. So here's what happens though. If you're using HTMX, it's more likely that you'll be submitting inputs that are not part of a form because you don't have to have a form anymore.

Lazarus: 01:35

You don't have to have the action anymore. You don't have to, you know, you can all your sort of Ajax calls, it's much more flexible, what sort of data you send. So you could have an input that's not attached to any form. It's not part of anything else. So if you have required on it, what does that mean?

Lazarus: 01:51

You know, what does that mean to the browser? A required input. Required for what? So it doesn't know which form is supposed to be required, you know, when it submits. So it doesn't really make sense for it to run that validation.

Lazarus: 02:03

But you might want to have it run that validation, right? Because you still, if it's supposed to not be empty and you still want to add it required or it's supposed to be an email, or, you know, there's a bunch of these other ones, then you still want to get those. So you still want it to check before it submits the thing. So that's when you add h x validate equals true onto the input or onto the parent div that wraps all the inputs, kinda like as if it were a form or something. So what are these, what are these options?

Lazarus: 02:36

What are the kinds of validation rules that can be used? And these are not specific to HTML. This is just part of HTML, required is obviously the one of the first ones. You can put that on anything, a select, a text area, an input. Min length, and max length.

Lazarus: 02:53

You can specify, you know, how long the data strings are, how long the strings are that are going in there. So if you, if you have a name and you want it to be more than 1 character or something like that, or just as a a check to make sure that they don't put something too long in there. If they're supposed to just put, you know, what's their business and they put like a paragraph or something. That's not the data you're looking for. So you can do min length and max length.

Lazarus: 03:17

Min and max for numbers, so if you wanted to put in, if it's a numerical thing and you want to add the min and max, those are in there. And you can specify a type whether that's an email address or some other specific, you know, some other specific HTML option, and a pattern. So you can actually specify a regular expression that defines the pattern that the entered data needs to follow. So a great example of this would be a phone number. And these are, like I said, nothing to do with HTMLX.

Lazarus: 03:49

These are just the types of validators that you can put on any HTML inputs. Right? What how this links to HX validate and h t and HTMLX is that if you have an input that's all on its own that's not part of a form so your browser's already doing this if it is part of the form. If it's not part of a form, you can add that h x validate equals true to make sure that when you submit with h t m x it's going to run the validation just like it normally would. And a big gotcha.

Lazarus: 04:20

This is the client side, just something to remember. You must revalidate on the server side. That's always true. React, Vue, HTML. Your server is the source of truth.

Lazarus: 04:33

That's where the real validation needs to happen. I think used correctly, the client side validation is great. It just kinda keeps them on the right path. Think of it like if you've ever done bowling and, you know, you can put up those little bumpers to make sure that you never get a gutter ball. So it's just a little gutter ball bumper for the user, to make them feel good about, oh, okay.

Lazarus: 04:56

You know, I'm not going to get a gutter ball and just put in completely the wrong data in this field. You both sort of agree, the user and the and the site. It's a good idea. They know what to expect. You make it clear for them, and they can't really move forward unless they submit the right stuff.

Lazarus: 05:10

But then your server is going to have to validate it again. That's just how it is. And just keep that in mind. Always keep that in mind. Okay.

Lazarus: 05:19

So just to make it sort of really advanced, there is more you can do with this h x validate. You can add your own custom validation logic directly into the attribute on that item. There's custom event triggers for the different parts of the validation API. The HTMLX taps into this browser validation API. So what does that mean?

Lazarus: 05:45

So let's say that you wanted to, I don't know. You but if you've probably seen that model where it only lets you delete if you type in a certain word. Right? So you have to type in, like, the name of the server that you're about to destroy forever. Just to make sure that you understand you're destroying this forever.

Lazarus: 06:05

So something like that, you could tap into, okay. And and so what are these things you can tap into? What are these built in events for validation? They are validate, so that's when it calls the validation, failed, so that's when it fails, and halted. So that's when the request was never sent because there were errors.

Lazarus: 06:26

So the way that you tap into these is not through the HX validate. That just turns the validation on for that input.