Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Required Fields form validation #2139

Open
karolskolasinski opened this issue Aug 16, 2024 · 2 comments
Open

Required Fields form validation #2139

karolskolasinski opened this issue Aug 16, 2024 · 2 comments
Labels
bug Things that aren't working right in the library.

Comments

@karolskolasinski
Copy link

Describe the bug

when sending a form with blank but required fields, an error message is shown for a random required field

To Reproduce

Steps to reproduce the behavior:

  1. Go to 'shoelace official webpage'
  2. Click on Submit button
  3. See validation (error) message most often for the checkbox

Screenshots

image

image

Browser / OS

  • OS: Linux Mint
  • Browser: Chrome
  • Browser version: Version 127.0.6533.119 (Official Build) (64-bit)

Additional information

should validate fields in the order they are in the form

@karolskolasinski karolskolasinski added the bug Things that aren't working right in the library. label Aug 16, 2024
@claviska
Copy link
Member

Hi there. Unfortunately, this is a symptom of how we use the formdata event to make Shoelace form controls work with regular forms. I don't believe it's something we can easily fix in the current version (but if someone manages to, a PR would be welcome!).

That said, you'll be happy to know that Web Awesome ("Shoelace 3") has already moved to Form-associated Custom Elements via the ElementInternals API. This API didn't exist when Shoelace was first developed, but it lets us build form controls that act as first-class citizens in a native form.

I can confirm that this issue has already been solved in Web Awesome :)

@karolskolasinski
Copy link
Author

what's more, if you create a form dynamically by adding inputs to it (e.g. you insert fields into the form using htmx), then validation of new fields does not work at all (it means submit behaves as if they were not there at all)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Things that aren't working right in the library.
Projects
None yet
Development

No branches or pull requests

2 participants