submit handler bypasses required

[millette]

If I declare form inputs with required, or type email, those conditions are bypassed and the form is always submitted. Can validation leverage the html form declaration?

[millette]

Gotcha https://felte.dev/docs/solid/reporters#using-the-constraint-validation-api

[pablo-abc]

Gotcha https://felte.dev/docs/solid/reporters#using-the-constraint-validation-api

This refers to displaying errors from any other validator using the CVAPI, not using the browser's validation. If it's about using the CVAPI to validate your values, there was #48 , but I had no time to get back into it and it's been a bit abandoned right now. I'm interested on going back to it, though.

When using Felte, novalidate is added to your <form> element. This is due to two things:

1. If you're using Felte anyway, it was figured this is the way you'd want to handle validation and reporting. Using the browser's API removes a lot of what Felte gives you.
2. This is the main reason: The browser handles validation of these fields before submit, so Felte has no way to get to these messages. If novalidate were to be removed, these validation errors would be displayed using the browser's tooltips rather than Felte. That's what Basic implementation of validator-cvapi #48 is about.

If you want Felte to obtain the messages from the browser's validation, I could find some time to revive #48. If there's a reason where you'd think appropriate to let the browser do validation (despite the second reason I described above), adding a configuration option to Felte would be trivial. Either way, if either of the previous applies to you, reopening this seems appropriate.

[millette]

Yeah, I've had time now to read thru other issues (great to read you and @benbender exchange on the topic). I don't want to add to the noise.

I might try to "add novalidate"/"remove novalidate" and see what it gets us, but I'm rather swamped with work right now.

NOTE: In the spirit of DRY, I added this bit of code to my validate() function:

document.querySelectorAll("form *[required]").forEach((a) => {
    const name = a.getAttribute("name")
    if (!values[name]) err[name] = "Requis!"
})