Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error prompts on empty / invalid fields are not correctly displayed on Chrome with version below 119 #279 #281

Merged
merged 4 commits into from
Dec 11, 2023
Merged

Error prompts on empty / invalid fields are not correctly displayed on Chrome with version below 119 #279 #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1fcd722
#279 - Add :invalid when :user-invalid is not supported
tdziezykDS Dec 7, 2023
1365f7f
#279 Add on focus out check validation
tdziezykDS Dec 7, 2023
138dbb6
#279 Fix typo
tdziezykDS Dec 7, 2023
71dde0f
#279 Fix selectors
tdziezykDS Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions blocks/v2-event-notify/v2-event-notify.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
11 changes: 8 additions & 3 deletions blocks/v2-event-notify/v2-event-notify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
19 changes: 14 additions & 5 deletions blocks/v2-forms/forms/event-notify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
}
};

Expand All @@ -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);
Expand Down