I’ve implemented custom JavaScript validation for Service Cases forms to enforce business rules before submission, but the validation script isn’t triggering consistently. The script is supposed to check required custom fields and validate email formats before allowing case creation. It works fine in Chrome during testing, but in production we’re seeing cases created with invalid data, suggesting the validation is being bypassed. The script is attached to the form’s submit event, but something’s interfering with the event handling. Here’s the basic structure:
document.querySelector('#caseForm').addEventListener('submit', function(e) {
if (!validateCustomFields()) {
e.preventDefault();
}
});
Users report that sometimes clicking Submit creates the case immediately without any validation messages. This is resulting in invalid case records that require manual cleanup. Has anyone experienced issues with form event handling in aec-2022’s Service Case module?
Good point about timing. I’ve verified the script loads properly, but I’m now seeing that some users access the form through quick-create shortcuts which might render the form differently than the standard case creation flow.
The quick-create shortcut is likely your culprit. Those modal forms often use different DOM structures and might not have the same form ID. You need to use event delegation or attach your validator to a parent element that’s always present, then filter for form submissions.
Form event timing can be tricky in Adobe Experience Cloud. The platform might be using its own form submission handlers that fire before or override your custom validation. Check if there are multiple submit handlers attached to the form - you might need to use event capturing phase instead of bubbling phase to ensure your validator runs first.
Have you tested across different browsers? You mentioned it works in Chrome but fails in production - what browsers are your users actually using? Safari and Firefox handle form events slightly differently, and older versions of Edge had known issues with custom form validation. Also check if any browser extensions might be interfering with your JavaScript execution. The browser compatibility angle is worth investigating thoroughly.
Another thing to check - is your script loading after the form is already rendered? If there’s a timing issue where the form appears before your event listener is attached, some submissions might slip through. Use DOMContentLoaded or ensure your script runs after the form element exists in the DOM.