Error details on form submission failure
- Karl Tompson
The Send2CRM website client deliberately avoids exposing specific error details when a form submission fails. Instead a configurable generic message is displayed. This page shows how to override that message.
Send2CRM does generate more detailed client-side error messages with specific error codes. These can be viewed in the browser console where error-level messages are logged on submission failure if the debug setting is enabled.
This information is also provided via the Send2CRM form submit event. The details could be used to display dynamic validation errors to website visitors as shown below.
Implement your code in a handler for a window event such as load or pageshow.
// Attach to all form elements automatically processed by Send2CRM.
document.querySelectorAll(send2crm.settings.formSelector).forEach(frm => {
// Listen for the Send2CRM form submit event which will be fired with error information when a submission fails.
frm.addEventListener('send2crmFormSubmit', (evt) => {
/* evt.detail: {
isSuccess: true|false,
error: '<populated with error code on failure>',
} */
if (!evt.detail.isSuccess) {
// Optional; you could maintain a map of codes to more human-friendly messages.
let errCode = evt.detail.error;
// Get the submit button, we use this as the invalid element for general form errors.
let frmSubmit = frm.querySelector('[type="submit"]');
if (errCode && frmSubmit) {
// Append the error code to the end of the default message.
// Alternatively you can display any message of your choosing here.
let errMsg = `${send2crm.settings.formFailMessage} [${errCode}]`;
// Apply the error to the submit element, this will override the default Send2CRM message.
frmSubmit.setCustomValidity(errMsg);
frmSubmit.reportValidity();
// Note Send2CRM will automatically clear the form invalidity after 5 seconds so re-submission attempts are possible.
}
}
});
});This example could also be adapted to perform error reporting on client-side form submission failures, for example by sending to an external logging service.
Record error and continue
In some cases you may wish to log errors and continue with the default form submission to the website. This example records the error code in a hidden field.
Implement your code in a handler for a window event such as load or pageshow.
// Attach to all form elements automatically processed by Send2CRM.
document.querySelectorAll(send2crm.settings.formSelector).forEach(frm => {
// Listen for the Send2CRM form submit event which will be fired with error information when a submission fails.
frm.addEventListener('send2crmFormSubmit', (evt) => {
if (!evt.detail.isSuccess) {
// Record the error code in a hidden field.
frm.querySelector('input[name="error"]').value = evt.detail.error || 'Unknown error';
// Change the event flag to successful so that Send2CRM will continue with normal form submission.
evt.detail.isSuccess = true;
}
});
});
});