[Request] Add is-empty and is-invalid classes

[Bandit]

Unless I'm missing something obvious, there's no easy way to style invalid or empty fields (or perform validation in general).

If I mark a Svelecte element as required it should visually show that a blank value is invalid. This could be achieved like so (pseudocode):

if (selectField.is(":invalid")) parent.classList.add("is-invalid") (and similar for is-empty)

That way people can reasonably rely on form.checkValidity() for client-side validation. Also easier to add custom style overrides for the different states.

[mskocik]

I am not really convinced about it. This can be achieved on your side like in this REPL

You can always determine the validity state based on bound value property. And you can rely on checkValidity for internal <select> element.

Personally I've never had need for this and I am also using its custom element version in PHP apps.

But you need to convince me, or prepare PR yourself.

[Bandit]

The :has(select:invalid) is a clever idea, I hadn't thought of that.

Can I ask why the above REPL isn't linked somewhere clearly in the documentation? There's almost zero information about validation and how to do it - which I personally find very surprising for a form element replacement.

Whether or not you add quick/convenience ways to determine validation is up to you - but in my opinion a drop-in form field replacement should integrate nicely with existing standards such as checkValidity()

For now I'll use the :has(select:invalid) method, thanks. Recommend adding this to the docs.

[mskocik]

Don't forget that even thouh Firefox supports :has, it isn't enabled yet by default.

I created this REPL for you. There is one REPL related to validation mentioned in github readme, but it's missing in doc site. I must have missed it.

I know that docs need rewrite, but it's so hard to write it the way, it will be really clear for everybody else and it's more time consuming. And I don't have time for it right now.

On 8. 9. 2022 11:49, James Nisbet wrote:

The |:has(select:invalid)| is a clever idea, I hadn't thought of that.

Can I ask why the above REPL isn't linked somewhere clearly in the documentation? There's almost zero information about validation and how to do it - which I personally find very surprising for a form element replacement.

Whether or not you add quick/convenience ways to determine validation is up to you - but in my opinion a drop-in form field replacement should integrate nicely with existing standards such as |checkValidity()|

For now I'll use the |:has(select:invalid)| method, thanks. Recommend adding this to the docs.

— Reply to this email directly, view it on GitHub https://github.com/mskocik/svelecte/issues/121#issuecomment-1240485308, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGCU5FAPS5F6BJTZGLKOOTTV5GZB3ANCNFSM6AAAAAAQHH4XWQ. You are receiving this because you commented.Message ID: @.***>

[Bandit]

Maybe just something like this:

<h2>Validation</h2>
<p>I intend to rewrite this documentation at some stage, but until then here are two REPLs that may help.</p>
<ul>
  <li>[REPL1]</li>
  <li>[REPL2]</li>
</ul>