Requiring a ticket attachment if a particular dropdown option is selected

6902233512986  yes I swapped out the XXXX's for my field ID.

4513632515226 Did you swap out the XXXXX for your field ID? 
e.g.:

var attachmentCheckboxField = 'request_custom_fields_XXXXXX';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'User request template must be attached';
var formDropdownClass = '.request_custom_fields_XXXXXX';

#request_custom_fields_XXXXXX_label,
#request_custom_fields_XXXXXX {

6902233512986 your code seems to be missing the piece where the attachment is required IF a specific option is selected in a field. I believe all the people who are having issues are people who already added the attachment field and hid it. But the requirement to have the attachment is not working when a specific option is selected. This code actually worked for me for about a year and some time inbetween something changed and is no longer working.

1263213537349 wondering if you can help. I added the codes to the style.css and the script.js and it's still showing the attachment as optional. I also have two other forms that would require attachments and those are not working as well. I'm On Copenhagen version 2.16.1 Templating API v2. Any help would be great! Thanks!


 Added jQuery to document_head.hbs

Selection to trigger attachment requirement

Result. The “Attachment” field is still listed as optional

Entered in style.css 

#request_custom_fields_XXXXXX_label,
#request_custom_fields_XXXXXX {
display: none;
}

Entered in script.js

// REQUIRE ATTACHMENTS ON ABC FORM 
$(document).ready(function() {
  // 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_XXXXXX';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'User request template must be attached';
var formDropdownClass = '.request_custom_fields_XXXXXX';
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 'Documentation' is selected
function isFormAttachmentRequired() {
// Get the text of the selected option in the dropdown
  var selectedOptionText = $(formDropdownClass + ' a.nesty-input').text();
  return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
         (selectedOptionText === 'Documentation';
}

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

I got this code working for my instance (Copenhagen theme). Added to script.js.

You need to create a check box (call it whatever you want. I called mine Attachments) and make it mandatory to submit a ticket.

Add the Checkbox to the form you want to use at the very bottom. Copy the ID for both the drop down menu where you need attachments and check box and remove the X's with the corresponding IDs.

 // Can't submit damage ticket without attachment
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 are observed:
// clear or select Attachment checkbox according to attachments
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_XXXXXX';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'Attachments cannot be blank';
var formDropdownClass = '.request_custom_fields_XXXXXX';
var formObserveMutationOptions = { childList: true, subtree: true };
// Clear or select checkbox according to attachments:
// Set Attachment checkbox if at least one attachment is uploaded, otherwise clear it
function setFormAttachmentCheckbox() {
 if ($('#request-attachments-pool .upload-item').length >= 1) {
   selectCheckbox(attachmentCheckboxId);
 } else {
   clearCheckbox(attachmentCheckboxId);
 }
}
// Select checkbox
function selectCheckbox(eltselector) {
 $(eltselector).prop('checked', true);
}
// Clear checkbox
function clearCheckbox(eltselector) {
 $(eltselector).prop('checked', false);
}
// If attachment checkbox field exists:
//   Watch for changes to attachments
if ($(attachmentCheckboxId).length) {
 startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
}
// Adjust attachment error notification
var attachmentErrorElt = $(attachmentCheckboxId + ' .notification-error');
if (attachmentErrorElt.length) {
 attachmentErrorElt.text(attachmentErrorNotification);
}
// Initial checkbox setting
setFormAttachmentCheckbox();    

Lastly, add this to style.css hide the check box field in the form. Replacing the X's with the checkbox ID

#request_custom_fields_XXXXXX_label,
#request_custom_fields_XXXXXX {
display: none;
}

To extend the functionality of the given code snippet to add an error notification for another dropdown option, we will modify the `isFormAttachmentRequired` function to check for the selection of the additional option as well. Assuming the additional option you want to include is 'EFGH', the code can be updated as follows:

// Return true if dropdown option 'ABCD' or 'EFGH' is selected
function isFormAttachmentRequired() {
 // Get the text of the selected option in the dropdown
 var selectedOptionText = $(formDropdownClass + ' a.nesty-input').text();
 // Check if the dropdown is expanded and if the selected option is 'ABCD' or 'EFGH'
 return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
        (selectedOptionText === 'ABCD' || selectedOptionText === 'EFGH');
}

This code modification does the following:
- Retrieves the text of the currently selected option in the dropdown using jQuery.
- Checks if the dropdown is expanded (using the `aria-expanded` attribute) and if the selected option text matches either 'ABCD' or 'EFGH'.

With this change, the `isFormAttachmentRequired` function will now return `true` if either 'ABCD' or 'EFGH' is selected, which can then be used to trigger the mandatory field error code for these options.

Remember to replace `'ABCD'` and `'EFGH'` with the actual text of the options you are interested in, and ensure that `formDropdownClass` correctly represents the class of your dropdown element in the HTML structure of your Zendesk form.

Can you provide me the code to add the error notification for another option as well.

// Return true if dropdown option 'ABCD' is selected
function isFormAttachmentRequired() {
  return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
         $(formDropdownClass + ' a.nesty-input').text() !=='';
}

Like this for another option in the same dropdown I need to add this Mandatory field error code

please help 6201945912474 4513632515226

Here's a simpler way to enforce that users upload an attachment before submitting a request. These changes should be added to the script.js. 

1. Disable the submit button on the form you wish to enforce attachment upload.

const button = document.querySelector('[value="Submit"]');
button.disabled = true;

2. Change the attachments default label to let the user know an attachment is required.

$('label[for="request-attachments"]').html('<b>Attach file template to proceed</b>.');  

3. Add an event listener to the attachments area to detect changes, and only enable the submit button (and change warning text) if there is at least one file attached.

 document.getElementById('request-attachments').addEventListener('change', function(event) {
  var fileInput = event.target;
  var fileCount = fileInput.files.length;
   if (fileCount > 0) {
     attachmentLabel.text("Attachments"); 
     button.disabled = false;
   }
  });

Here's how it looks on the submit a request page, before and after attachment upload:

Before:

After:

Hope this helps someone else!

I'm sorry, but I can't believe this is not a standard feature available via forms.

This is such a basic use case which thousands of customers will require, and we have to build some complicated, messy workaround on our own in order to realize it.

It baffles me how expensive this tool is for the amount of features it offers.

Hi Zendesk Community,

I did as explained: 

Made the checkbox mandatory and filled the 3 variables in the code (checkbox ID, dropdown ID and i kept abcd as a value) and for any other value than abcd i keep getting "checkbox checked required" error message..

I get that;