Requiring a ticket attachment if a particular dropdown option is selected

44 コメント

  • CJ Johnson

    Update: I have a working solution for my comment above! 

    First, I totally didn't realize that Fikri had already posted what I asked about above. Minus that final bracket, it's a perfect working code example of requiring an attachment on a form, period, no other field requirements. @... sorry to ping you about a year old comment on a Zendesk article but your comment on this saved me hours of work and headaches, you are my hero this week!! 

    Second, I am not confident the more official code example in the guide still works. I tried so many things to get it to work but also consistently got that 'formAttachmentDropdownClass is not defined', and while I'm an absolute beginner at javascript, I gotta say that I don't think it's an implementation issue, I can't see anywhere that it's being defined, either. 

    Fortunately for me, and possibly for whoever is reading this comment, you can still use Fikri's code to require an attachment on a form because it never references that class, because a dropdown isn't needed for that version. 

  • Patrick Lieu

    Is there a way to force an attachment for only when a specific field is selected (and not from the intital form selection)?

  • Jesper Rosenkrantz

    CJ Johnson My turn to ping you in an old thread ... I am looking for a solution for this, but it seems this doesn't work on newer themes. Do you have something set up that makes attaching files mandatory? And if so, does it require an older theme?

  • Anastasia Kachanova

    Hi guys,

    Maybe anyone is familiar, if it's possible to use dynamic content in the below part (error message shown to end-user if there is no attachment selected) :

    var attachmentErrorNotification = 'Attachments: cannot be blank';

    Thanks in advance!


  • Anastasia Kachanova


    Seems that "attachment" checkbox is not hidden anymore. Can anyone please check into this and advise how this field could be hidden again?



  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Anastasia,
    Have there been changes to your theme's styles since the checkbox stopped hiding?  A change that conflicts with the Hide the checkbox field section could cause what you're seeing.
  • Saasten

    can we make the "attachment" as a mandatory based on the value from the dropdown?

  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Dikka,
    This tip walks through making the attachment required after a specific dropdown value is selected.  Is there an issue you're encountering when implementing?
  • Noelle Cheng

    Christopher Kennedy are you able to assist me with my issue below? This code isn't working and I'm having trouble getting it to require attachments based on a selection. The attachment checkbox doesn't work.


    This doesn't seem to be working now. I'm able to fully submit a ticket without uploading an attachment when I select my option from the drop down. It's not requiring the attachment. When i show the attachment checkbox, i see that it never checks the box.


    My HC is currently on the below:

    Theme version 2.15.0
    Templating API v2

    Below is the code that are currently in the sections style.css and script.js. Items in bold and italic are what I updated to my specifics.

    STYLE.CSS (pasted at the bottom of the existing code)
    #request_custom_fields_7685982184091 {
    display: none;

    SCRIPT.JS (pasted at the bottom of the existing code)
    I have multiple forms and I need this to work only for a specific form. Can someone assist? Below is the code I'm using.


    // 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') {

    // 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) {
        else {
      else {

    // 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)) {
      startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
      startObserveMutations(formDropdownClass, formObserveMutationOptions, mutationObservedForm);

    // Adjust attachment error notification
    var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
    if (attachmentErrorElt.length) {

  • Elizabeth C

    This is great...but I am getting the error " The upload took too long, connection was lost." 

    What did I do wrong?

  • Anonimas Anonimas


    Where to find # for attachmentCheckboxField? I did everything as explained, but the error message doesn't pop up at all. I assume I'm missing this ID. Any suggestions?

    Talking about this part:

    var attachmentCheckboxId = '#' + attachmentCheckboxField;


  • Raphaël Péguet -

    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;

  • Jan Schweigerer

    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.

  • Katie Sullivan

    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 =;
      var fileCount = fileInput.files.length;
       if (fileCount > 0) {
         button.disabled = false;

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



    Hope this helps someone else!



Powered by Zendesk