Form Validation

[summersz]

Form validation isn't working as I would expect it to when using constraint validation.
According to the text-field docs Text fields in a <form> will validate on submission, or by calling textField.reportValidity().
This doesn't seem to be working on form submit. I am able to run reportValidity on each field manually and that works as expected.

The other issue I have is that on form submit the browser pop-up errors show, which is redundant if the input errors are displaying.

Ideally, on submit I think the inputs should be validated and show their errors and the browser default display would be prevented.

[summersz]

Having just checked with the latest nightly build, the inputs are now correctly showing their error messages on form submit.

It is just the browser displayed message that I would like prevented, if possible?

[asyncLiz]

I'm working on that right now ☺️

[SummersRA]

Will it also be possible for the error-text attribute to overwrite the browser error messages when using constraint validation?

[asyncLiz]

Yes, setting error-text="Message" will always override the browser error messages. Use this and the error attribute when an app needs to coordinate error state (for example, using redux for error state management).

You can also use textField.setCustomValidity('Message'), which will set textField.validity.customError to true (error-text does not)

[SummersRA]

Thanks! That wasn't happening for me, but I realize now that it was a problem with my own implementation. I have my own code running to prevent the browser pop-ups for now and that was always overwriting the error-text attribute 😳

[summersz]

Hi, I can see there have been some updates made and the browser defaults are no longer showing with the nightly builds. Thanks!

I would expect, after a submit, that the validity would continue to update on change/input for the fields. e.g. if a required field has been missed it flags as required when the form submits, and the message would clear once the user has made an input, or change to a different message like minimum character length.

Is this the goal for the validity behavior or is this something I would need to handle with javascript?