Manual QForm validation ignores HTML5 input types

[0x011B]

trafficstars

What happened?

When doing a manual validation in a QForm with a QInput that has it's type set to "email" via formRef.validate(), said function always returns true, even if the email is incorrect. In order to circumvent this, you have to check the validity by hand via the checkValidity() method.

P.S.: When doing a manual validation, reportValidity() has to be called manually on the underlying NativeElement of QInput. Setting QForm.validate(true) (shouldFocus parameter) does nothing. In both these cases, inline code works as expected (when using a submit button), linting and validating respectfully.

What did you expect to happen?

Manually calling a validation should validate the types already, this shouldn't be part of the submit step.

Reproduction URL

https://codepen.io/0x011B/pen/bGZEajM

How to reproduce?

Run 'Validate' to see a console log of 1. qform validate() and 2. the js form validation.

Flavour

Vue CLI Plugin (vue-cli-plugin-quasar)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[pdanpdan]

Not a fix but you can apply checkValidity and reportValidity at form level for all children

https://codepen.io/pdanpdan/pen/bGZELdm?editors=1010