form.submit() to perform HTML5 validation

[IlyaSemenov]

Package

v4.x

Description

As a developer working with forms, I rely not only to validation schemas, but also to HTML5 validation. Namely, I use <input required>, <input type="number" min= max=>, and I expect the form to display those errors natively. Most of the time it happens automatically when I use <button type="submit">.

The problem is, if I use u-form inside u-modal, the form goes to the modal body, and the submit button goes to the modal footer. As the result, the submit button can't natively perform form submit, and I have to do something like:

u-button(:disabled="form?.loading" @click="form?.submit") Submit

This works, but it doesn't trigger HTML5 validation.

What I propose is, in form.submit(), call the native validation before calling onSubmitWrapper:

ui/src/runtime/components/Form.vue

Lines 403 to 405 in 6c083ef

	async submit() {
	await onSubmitWrapper(new Event('submit'))
	},

The code could go like this instead:

async submit() { 
  const formEl = document.getElementById(formId)
  if (formEl?.reportValidity() !== false) {
    await onSubmitWrapper(new Event('submit'))
  }
}

Additional context

No response

[mhelbich]

Just as a note, because I've had the issue before as well - you can also use the "form" attribute on a button to provide a form's ID to link the button to the form, when the submit button is not contained within the form's HTML node.

https://html.spec.whatwg.org/multipage/form-elements.html or https://www.w3schools.com/tags/att_button_form.asp.

Your proposal seems good for avoiding having to do some custom prop passing (like "form-id" to both the form and the submit button from the parent) though.

[IlyaSemenov]

Live and learn. Thanks for the heads up!