-
Greetings. I'm developing a form with Snowboard. I managed to disable the alert message I got every time there's some validation error, but I couldn't get to disable the flash messages. I thought setting "flash" to "false" in the options object "quoterRequestOptions" would be enough (or so I thought the documentation said) but no. I'll leave the code so someone can point out what I'm doing wrong. Thank you in advance. const quoterFormBtn = document.getElementById('cotizador-form-contacto-btn'),
quoterContactForm = document.getElementById('quoter-contact-form'),
quoterNameInput = document.getElementById('input-nombre'),
quoterEmailInput = document.getElementById('input-correo'),
quoterPhoneInput = document.getElementById('input-telefono'),
quoterContactFormFailureMsg = document.getElementById('quoter-contact-form-failure'),
quoterContactFormSuccessMsg = document.getElementById('quoter-contact-form-success'),
emailRegEx = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
digitsOnlyRegEx = /^\d+$/,
errorsMessages = {
name: '',
email: '',
phoneNumber: ''
};
function cleanErrorWarnings (errorCSSSelector) {
const errorMessagesElements = Array.from(quoterContactForm.querySelectorAll(errorCSSSelector));
if(errorMessagesElements.length > 0) {
errorMessagesElements.forEach(errMsgEl => errMsgEl.remove());
quoterContactFormFailureMsg.style.display = 'none';
quotationAdjustCurrentSlideHeight();
}
errorsMessages.name = '';
errorsMessages.email = '';
errorsMessages.phoneNumber = '';
}
function showErrorMessage(input, message) {
input.insertAdjacentHTML('afterend', `<p class="input-field__validation-message force-block">${message}</p>`);
quoterContactFormFailureMsg.style.display = 'block';
quotationAdjustCurrentSlideHeight();
}
const quoterRequestOptions = {
form: quoterContactForm,
browserValidate: true,
error: function (data, request) {
//Set form free from old error messages if it isn't 1st request
cleanErrorWarnings('.input-field__validation-message');
//Generate error messages and handle them
const errorMessagesObj = request.responseData['X_WINTER_ERROR_FIELDS'];
if('input-nombre' in errorMessagesObj) quoterNameInput.insertAdjacentHTML('afterend', `<p class="input-field__validation-message force-block">${errorMessagesObj['input-nombre'][0]}</p>`);
if('input-correo' in errorMessagesObj) quoterEmailInput.insertAdjacentHTML('afterend', `<p class="input-field__validation-message force-block">${errorMessagesObj['input-correo'][0]}</p>`);
if('input-telefono' in errorMessagesObj) quoterPhoneInput.insertAdjacentHTML('afterend', `<p class="input-field__validation-message force-block">${errorMessagesObj['input-telefono'][0]}</p>`);
quoterContactFormFailureMsg.style.display = 'block';
quotationAdjustCurrentSlideHeight();
},
success: function (data, request) {
//Set form free from old error messages if it isn't 1st request
cleanErrorWarnings('.input-field__validation-message');
quoterContactForm.reset();
quoterContactFormSuccessMsg.style.display = 'block';
quotationAdjustCurrentSlideHeight();
quoterContactFormSuccessMsg.scrollIntoView({behavior: 'smooth', block: 'end'});
setTimeout(function(){
quoterContactFormSuccessMsg.style.display = 'none';
quotationAdjustCurrentSlideHeight();
}, 10000);
}
};
class AlertDisabler extends Snowboard.Singleton
{
listens() {
return {
ajaxErrorMessage: 'disableAlertMessages'
};
}
//Prevents alert each time there's an error
disableAlertMessages(message, request) {
return false
}
}
Snowboard.addPlugin('alert__disabler', AlertDisabler);
quoterFormBtn.addEventListener('click', () => {
cleanErrorWarnings('.input-field__validation-message');
quoterFormBtn.classList.add('wn-loading');
if (quoterNameInput.value === '') {
errorsMessages.name = 'El campo es requerido.';
showErrorMessage(quoterNameInput, errorsMessages.name);
}
if (quoterEmailInput.value === '') {
errorsMessages.email = 'El campo es requerido.';
showErrorMessage(quoterEmailInput, errorsMessages.email);
} else {
if (!emailRegEx.test(quoterEmailInput.value)) {
errorsMessages.email = 'El campo requiere un valor con formato de correo electrónico.';
showErrorMessage(quoterEmailInput, errorsMessages.email);
}
}
if (quoterPhoneInput.value === '') {
errorsMessages.phoneNumber = 'El campo es requerido.';
showErrorMessage(quoterPhoneInput, errorsMessages.phoneNumber);
} else {
if (!digitsOnlyRegEx.test(quoterPhoneInput.value)) {
errorsMessages.phoneNumber = 'El campo requiere un valor con formato numérico.';
showErrorMessage(quoterPhoneInput, errorsMessages.phoneNumber);
}
}
if (errorsMessages.name === '' && errorsMessages.email === '' && errorsMessages.phoneNumber === '') {
Snowboard.request(quoterFormBtn, quoterContactForm.dataset.request, quoterRequestOptions);
}
quoterFormBtn.classList.remove('wn-loading');
}); |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
I found the solution after several rounds of experiments. I just needed to remove the plugins "flash" and "flashlistener" before adding "AlertDisabler". Snowboard.removePlugin('flash');
Snowboard.removePlugin('flashlistener'); |
Beta Was this translation helpful? Give feedback.
I found the solution after several rounds of experiments. I just needed to remove the plugins "flash" and "flashlistener" before adding "AlertDisabler".