Support Article
Changing the alert message during Client side validation
Summary
How to change the error message **"Please correct flagged fields before submitting the form!"** that appears in an alert when client side validation is triggered?
Due to Web Content Accessibility Guidelines (WCAG) AA level conformance, the alert message needs to include the amount of input or form issues that are on the page, for example "There are 6 errors in the current application form. Please go back, correct these issues, and re-submit."
The error message needs to include the variable of how many items are in an error state.
This alert is needed for the screen reader to announce the number of errors on the page when submitted.
Resolution
Perform the following local-change:
- Create a non-autogenerated section and include it below the navigation.
- Input the custom javascript in the section:
• Replace the validation function
• Iterate over each red label in the page
• Gather how many exist and are visible to the user
• Place the number in an alert box, with a new message
//overwrite existing function
function customClientErrorHandler(){
if(Navigation.isDeferError() != 'true'){
//reset the errorcounter each time we validate
var errorCounter = 0;
//get each error and iterate over them
$('.iconError.dynamic-icon-error').each(function(){
//make sure the label is visible to the user, and not hidden
if ($(this).is(':visible')){
//increase the error counter
errorCounter++;
}
});
//do the new alert with message.
alert("Error Submitting Application.\n\nThere are " + errorCounter + " errors on the application form submitted.\nPlease go back and fix the errors, then submit the form again.");
return true;
}
}
This will popup the alert, for the screen reader to announce.
Published January 31, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.