How to make attachment field required on web form for customers? | Community
Skip to main content

How to make attachment field required on web form for customers?

  • February 2, 2023
  • 0 replies
  • 0 views

Eduardo12

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);
}