Validator component: Custom validation

[atollk]

I love the idea of the new Validator component (https://v5.daisyui.com/components/validator/).
What is missing for me is the option to have more control over the validation error, i.e. support for custom validation logic that goes beyond standard HTML.

I imagine it could look something like a new CSS class being added: "validator-error", which the daisyUI user can conditionally apply to their Validator element via JS. Basically, the current styling of the Validator would need to change so that it either reacts to :user-invalid or .validator-error.

I have been trying to get something working with setCustomValidity to manually set the :user-invalid pseudo-clsas but calling that function in onfocusout seems to be problematic w.r.t. order of execution.

Unless I am missing something, this change is so small that I could probably create a PR for it.

[saadeghi]

Thanks.
daisyUI is just the CSS and validator relies on HTML's native validation. As you mentioned, it can be customized using setCustomValidity. You may need reportValidity to report the validity to the browser.

Let me know if you have a question.

[atollk]

Hey. Thanks for your response. It might be helpful to add a small example with that to the documentation page of the component, as (afaik) that's not a widely known feature.

[nicky9door]

I wouldnt mind seeing a couple custom classes to force a validity class. Something like 'validator-valid' and 'validator-invalid' would be really helpful when using a third party form validation library in conjunction with a JS framework

[saadeghi]

Instead of validator-valid you can use input-success.

The purpose of validator class is to automate the color change based on the HTML validation rule. If it has to be manual, setting colors to success or error makes more sense.

[nicky9door]

Ah that makes sense. I overlooked those classes. Thanks

[20pargyle]

@atollk Are you thinking of something like the html attribute pattern?
As I've been using validator, I've been using that to enforce a regex on my html inputs, and the validator-hint responds to it as expected. (the way that inputs accept regex statements can be a bit finicky, but once you understand that, it works great!)
Although now that I think of it, that isn't "beyond standard HTML". Still a possible solution for some!