How to make attachment field required on web form for customers?
I've been searching to find a way to make zendesk attachment field required and I found this documentation: https://support.zendesk.com/hc/en-us/community/posts/4409515169946-Requiring-a-ticket-attachment-if-a-particular-dropdown-option-is-selected
It says to create a checkbox field and hide it via CSS, and with a javascript code, we select the field if a attachment is uploaded, but I'm trying to do as said on the documentation, and is not woking, I've used the folowing code:
// REQUIRE ATTACHMENTS FOR FORM A
// Function to start observing node for mutations
var startObserveMutations = function (nodeSelector, options, callbackFunction) {
var node = document.querySelector(nodeSelector);
if (node) {
var observer = new MutationObserver(callbackFunction);
observer.observe(node, options);
return observer;
}
};
// Callback function to execute when mutations in form attachments or dropdown are observed:
// clear or select Attachment checkbox according to dropdown
var mutationObservedForm = function (mutationsList) {
mutationsList.forEach(function (mutation) {
if (mutation.type == 'childList') {
setFormAttachmentCheckbox();
}
});
};
// Define some variables for requiring form attachments
var attachmentCheckboxField = 'request_custom_fields_7685982184091';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'Attachment is required';
var formDropdownClass = '.request_custom_fields_7686337209627';
var formObserveMutationOptions = { childList: true, subtree: true };
// Clear or select checkbox according to dropdown and attachments:
// Set Attachment checkbox if no attachments required, or if attachments are required and at least one is uploaded, otherwise clear it
function setFormAttachmentCheckbox() {
if (isFormAttachmentRequired()) {
if ($('#request-attachments-pool .upload-item').length) {
selectCheckbox(attachmentCheckboxId);
}
else {
clearCheckbox(attachmentCheckboxId);
}
}
else {
selectCheckbox(attachmentCheckboxId);
}
}
// Return true if dropdown option 'Option 1' is selected
function isFormAttachmentRequired() {
return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
$(formDropdownClass + ' a.nesty-input').text() === 'Option 1';
}
// Select checkbox
function selectCheckbox(eltselector) {
$(eltselector).prop('checked', true);
}
// Clear checkbox
function clearCheckbox(eltselector) {
$(eltselector).prop('checked', false);
}
// If attachment checkbox field exists:
// Select the checkbox if attachment is not required
// Watch for changes to attachments and dropdown
if ($(attachmentCheckboxId).length) {
if (!isFormAttachmentRequired(formAttachmentDropdownClass)) {
selectCheckbox(attachmentCheckboxId);
}
startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
startObserveMutations(formDropdownClass, formObserveMutationOptions, mutationObservedForm);
}
// Adjust attachment error notification
var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
if (attachmentErrorElt.length) {
attachmentErrorElt.text(attachmentErrorNotification);
}
Por favor, entrar para comentar.
0 Comentários