WIP: suppress native browser pop-ups

TODO: should only scroll into view if needed
May need a third-party dependency for that on many browsers. See:

w3c/csswg-drafts#1805
https://www.npmjs.com/package/scroll-into-view-if-needed
https://caniuse.com/mdn-api_element_scrollintoviewifneeded

packages/oruga-next/src/utils/FormElementMixin.ts

@@ -131,6 +131,18 @@ export default defineComponent({
 
 		onInvalid(event: Event) {
 			this.checkHtml5Validity();
+			if ((event.target instanceof HTMLElement) && this.parentField && this.useHtml5Validation) {
+				// We provide our own error message, so we should suppress the browser's default tooltip.
+				// We still want to focus the invalid input, though.
+				// We'll scroll to put the whole field in view, not just the element that triggered the event,
+				// which should mean that the message will be visible onscreen.
+				event.preventDefault();
+				const fieldElement = this.parentField.$el;
+				event.target.focus({ preventScroll: fieldElement != null });
+				if (fieldElement) {
+					fieldElement.scrollIntoView();
+				}
+			}
 			this.$emit("invalid", event);
 		},
 
@@ -174,7 +186,7 @@ export default defineComponent({
 			const el = this.getElement();
 			if (!el) return;
 
-			if (!el.validity.valid) {
+			if (!el.checkValidity()) {
 				this.setInvalid();
 				this.isValid = false;
 			} else {

packages/oruga/src/utils/FormElementMixin.js

@@ -129,6 +129,18 @@ export default {
 
 		onInvalid(event) {
 			this.checkHtml5Validity();
+			if ((event.target instanceof HTMLElement) && this.parentField && this.useHtml5Validation) {
+				// We provide our own error message, so we should suppress the browser's default tooltip.
+				// We still want to focus the invalid input, though.
+				// We'll scroll to put the whole field in view, not just the element that triggered the event,
+				// which should mean that the message will be visible onscreen.
+				event.preventDefault();
+				const fieldElement = this.parentField.$el;
+				event.target.focus({ preventScroll: fieldElement != null });
+				if (fieldElement) {
+					fieldElement.scrollIntoView();
+				}
+			}
 			this.$emit("invalid", event);
 		},