Error prompts on empty / invalid fields are not correctly displayed o…

…n Chrome with version below 119 #279 (#281) * #279 - Add :invalid when :user-invalid is not supported
Netcentric · Dec 11, 2023 · 58fc439 · 58fc439
1 parent 2cbaaee
commit 58fc439
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/blocks/v2-event-notify/v2-event-notify.css b/blocks/v2-event-notify/v2-event-notify.css
@@ -94,6 +94,14 @@
   border-color: var(--c-error-red);
 }
 
+@supports not selector(:user-invalid) {
+  .v2-event-notify__container input:invalid,
+  .v2-event-notify__container input:invalid:hover,
+  .v2-event-notify__container input:invalid:focus {
+    border-color: var(--c-error-red);
+  }
+}
+
 .v2-event-notify__container .event-notify__add-event-button {
   cursor: pointer;
 }

diff --git a/blocks/v2-event-notify/v2-event-notify.js b/blocks/v2-event-notify/v2-event-notify.js
@@ -162,9 +162,14 @@ export default async function decorate(block) {
   // we can inject the policy content when form content loaded
   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
-      const formRef = [...mutation.addedNodes];
-      const policyEl = formRef.find((el) => el.querySelector('.event-notify__policy'))?.querySelector('.event-notify__policy');
-      const calendarButtonEl = formRef.find((el) => el.querySelector('.event-notify__add-event-button'))?.querySelector('.event-notify__add-event-button');
+      const formRef = [...mutation.addedNodes].find((el) => el instanceof Element && el.classList.contains('v2-forms__container'));
+
+      if (!formRef) {
+        return;
+      }
+
+      const policyEl = formRef.querySelector('.event-notify__policy');
+      const calendarButtonEl = formRef.querySelector('.event-notify__add-event-button');
 
       if (formRef) {
         policyEl.append(policyText);

diff --git a/blocks/v2-forms/forms/event-notify.js b/blocks/v2-forms/forms/event-notify.js
@@ -42,13 +42,16 @@ const formContent = `
   </div>
 `;
 
-const checkFieldValidity = (field) => {
+const checkFieldValidity = (field, useUserInvalid = true) => {
   const errorMessageEl = field.parentElement.querySelector(`:scope > .${formName}__error-message`);
 
   if (errorMessageEl) {
-    const isUserInvalid = field.parentElement.querySelector(':scope:user-invalid') === field;
-    errorMessageEl.innerText = isUserInvalid ? '' : field.validationMessage;
-    errorMessageEl.classList[isUserInvalid ? 'add' : 'remove'](`${formName}__error-message--hidden`);
+    const isSupportingUserInvalid = CSS.supports('selector(:user-invalid)');
+    const invalidSelector = isSupportingUserInvalid && useUserInvalid ? ':user-invalid' : ':invalid';
+    const isInvalid = field.parentElement.querySelector(`:scope ${invalidSelector}`) === field;
+
+    errorMessageEl.innerText = isInvalid ? field.validationMessage : '';
+    errorMessageEl.classList[isInvalid ? 'remove' : 'add'](`${formName}__error-message--hidden`);
   }
 };
 
@@ -61,13 +64,19 @@ export const postLoad = (form) => {
     field.addEventListener('input', () => {
       checkFieldValidity(field);
     });
+
+    field.addEventListener('focusout', () => {
+      checkFieldValidity(field);
+    });
+
+    checkFieldValidity(field);
   });
 };
 
 export const onSubmit = async (form, handleSubmit) => {
   const fields = [...form.querySelectorAll('input')];
 
-  fields.forEach(checkFieldValidity);
+  fields.forEach((el) => checkFieldValidity(el, false));
 
   if (form.checkValidity()) {
     await handleSubmit(form);