How to use custom form validation styles?

[HovKlan-DH]

I am not a big fan of the "native" validation look in a form, as it looks like something from the 90's 🤣 I would like a form validation that looks more alike e.g. Bootstrap, where you can have a red <div> for an error or a green <div> for success so, to archieve this it seems I must do some custom made styling.

Reading https://backers.webawesome.com/docs/form-controls shows that we can use e.g. <data-wa-required> or <data-wa-invalid> etc. but as I do not fully understand this, then it would be great having a couple of examples on the documentation page to illustrate how to use this.

E.g. would anyone be willing to show-case a simple example of this?

[KonnorRogers]

@HovKlan-DH I actually had this on my to-do list to add to the docs, let me see if I can scaffold a quick example for ya!

[KonnorRogers]

There's quite a bit of ergonomics for us to improve, but heres a rough example of how you could implement it. I haven't ran it through a screenreader either. We'll work on getting some actual examples up and improving the API. Right now, its pretty bare bones what the browser gives you.

https://codepen.io/paramagicdev/pen/VwJqrPx?editors=1000

[HovKlan-DH]

Thank you for giving some hints on this, and I will investigtae this some more. I did try it out from your example, and one thing I am missing is, how to define my own error text, instead of the static "Please match the requested format"? I did expect this to be this line:

e.target.parentElement.querySelector(".error-message").textContent = "Whatever";

But it does not change the error text?

I am striving for the Bootstrap look, as I think it looks quite stylish and clear:

However, I am not sure how to get the validation suffix icon, and the "glow" effect, instead of the rough blue.

No need to go into more details about this one, if this is something that will be looked into later in the final version, but I do think the current validation styling currently is a little too old-school. It works but ... 😁

[KonnorRogers]

Ah thats actually checked in 2 spots. I re-wrote the pen to be a little cleaner.

https://codepen.io/paramagicdev/pen/VwJqrPx?editors=1000

but I do think the current validation styling currently is a little too old-school

its not really old school, its just what the browser provides with the constraint validation API. So whatever that validation looks like is your browser's UI, nothing we control.

https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation

As for adding icons and glows, youre going to want to use the slot="suffix" and hide them until the parent element is [data-wa-valid] / [data-wa-user-invalid] respectively.

user-invalid means the user has to interact with the input. "focus" -> "input text" -> "blur"

Same with user-valid. Equivalent to the native :user-valid / :user-invalid respectively.

Here's a codepen of how I'd accomplish Bootstrap like styling:

https://codepen.io/paramagicdev/pen/NWZezRM?editors=1000

2024-09-06.18-11-18.mp4

Again, ergonomics we can add to make this stuff nicer. Right now its a pretty barebones implementation just using what the browser gives us. No opinions right now.