Recent searches
No recent searches
Requiring a ticket attachment if a particular dropdown option is selected
Posted Mar 27, 2019
Update from Community Team: jQuery has removed in v2 themes and this tip doesn't work without jQuery.
How to require an attachment in a ticket if a particular dropdown option is selected
We needed to require an attachment if a certain dropdown option was selected by the user when they are filling out a certain form to submit a ticket. Without being able to require the attachment, extra time would need to be spent by the agent to contact the user and ask for the additional document.
Solution Overview
This was done by creating a custom checkbox field that is set to be required, and adding the checkbox to the form, hiding the checkbox via CSS, then programatically selecting or clearing the checkbox according to the dropdown option selected and the number of attachments present.
Limitations
- This solution detects that an attachment has been uploaded, but doesn't verify that the attachment is the particular document that needs to be attached.
- This solution uses MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver), which is not supported in some older browser versions
- A user could get around the requirement to upload an attachment by using the DOM inspector to show the checkbox, and then selecting it manually.
Steps
Add the custom checkbox field
Create the custom checkbox field
- Navigate to the Ticket Fields page
- Click Add field
- Select Checkbox type
- Under Permissions, select Editable for end users
- Enter whatever title you would like, in Title shown to agents and Title shown to end users. I used the title 'Attachment'
- Select the Required to submit a request option.
- Click Save to create the field
- Note the field ID shown in the list of ticket fields for the new ticket field
Add the custom checkbox field to the form
- Navigate to the Ticket Fields page
- Locate the form for which you need to require the attachment, and click it
- Drag the new field from the list of fields on the right to the list of fields in the form. Make sure that it is the last field in the form (because you want the error notification that appears if an attachment is required but not uploaded, to appear above the attachment upload box).
- Click Save form to save the change.
Hide the checkbox field
Add the following to style.css to hide the field label and the field (replace the custom field ID in this code with your custom field ID). You have to hide the field label and field individually instead of hiding the <div> that contains them, because if there is an error notification that an attachment wasn't uploaded, it is inside the <div>.
#request_custom_fields_360017775731_label,
#request_custom_fields_360017775731 {
display: none;
}
Set the checkbox according to the attachments and dropdown
1) Determine the field ID of the dropdown. You can do this from the Ticket Fields page or with the DOM inspector by opening the form in your Zendesk, and then inspecting the dropdown. The screenshot below shows the dropdown on the web page, and the element inspector portion that shows the field ID
2) Add the following code in script.js inside the document ready function, e.g.after $(document).ready(function () { : and before the ending line }); [You have to adjust the field IDs in attachmentCheckboxField and formDropdownClass to match your field IDs, and adjust the option checked in function isFormAttachmentRequired to match the particular option in your case]:
// 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_360017775731';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'Report must be attached';
var formDropdownClass = '.request_custom_fields_360017548611';
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 'ABCD' is selected
function isFormAttachmentRequired() {
return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
$(formDropdownClass + ' a.nesty-input').text() === 'ABCD';
}
// 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()) {
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);
}
Note: The code that detects changes to the attachments and dropdown uses MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver), as mentioned above. Basically you create an observer instance and pass it a callback function to execute when changes are observed. Then you start the observer, passing it the target node and options specifying what changes to observe.
When the above steps are done, and style.css and script.js are changed as shown above, then you will see that if you open the form and select the dropdown option that requires an attachment, and then click Submit, an error notification is displayed:
Hope this helps somebody!
0
59 comments
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.
1
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)?
0
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?
0
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!
0
Anastasia Kachanova
Hi,
Seems that "attachment" checkbox is not hidden anymore. Can anyone please check into this and advise how this field could be hidden again?
Thanks,
Anastasia
0
Christopher Kennedy
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.
0
Saasten
can we make the "attachment" as a mandatory based on the value from the dropdown?
0
Christopher Kennedy
This tip walks through making the attachment required after a specific dropdown value is selected. Is there an issue you're encountering when implementing?
0
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_label,
#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.
// 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);
}
0
Elizabeth C
This is great...but I am getting the error " The upload took too long, connection was lost."
What did I do wrong?
0
Anonimas Anonimas
Hi,
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;
Thanks!
1
Raphaël Péguet - Officers.fr
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;
0
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.
1
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.
2. Change the attachments default label to let the user know an attachment is required.
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.
Here's how it looks on the submit a request page, before and after attachment upload:
Before:
Hope this helps someone else!
2
Simon ATUYER
Hello everyone,
I followed the procedure but my code does not work. I am a beginner and I would like to make it mandatory to add the attachment to send the form. Attached is my script:
$(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_15233785880850';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'Test';
var formDropdownClass = '.request_custom_fields_15106539093266';
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 'ABCD' is selected
function isFormAttachmentRequired() {
return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
$(formDropdownClass + ' a.nesty-input').text() !=='';
}
// 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);
}
Can you help me ?
0
Sheena
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 Simon ATUYER Noelle Cheng
0
Brandon (729)
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:
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.
0
C A
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.
Lastly, add this to style.css hide the check box field in the form. Replacing the X's with the checkbox ID
0
Noelle Cheng
C A 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.
Brandon (729) 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
Entered in script.js
0
C A
Noelle Cheng Did you swap out the XXXXX for your field ID?
e.g.:
0
Noelle Cheng
C A yes I swapped out the XXXX's for my field ID.
0
Noelle Cheng
C A Looks like I had misspelled one of the "formDropdownClass" fields. Although I am having an issue when testing that if there is no attachment but it's required, the attachment text reverts back to the “Attachments (optional)” text. If you have any insight that would be great! Thank you!
Prior to submitting request
Submitted request but submission failed due to no attachment – I need it to retain the custom Attachment verbiage.
0
C A
Noelle Cheng, I copy pasted the code from my instance. You would just need to make sure that you swap out the IDs.
In the bit where you check for a certain drop down value
var formDropdownClass =
I have multiple drop down options added, as I needed to have attachments mandatory for multiple forms.That's how it looks like if no attachment is added

0
Noelle Cheng
C A I tried your code versus mine but it ended up failing. I have 2 forms that need the same attachment message but another form that says something different. Here is my code for one of the forms that requires the attachment. I keep getting the issue where if I submit a ticket without the attachment if the dropdown selection requires it, the attachment field reverts back to “Attachment (optional)” instead of maintaining my custom verbiage.
0
C A
Noelle Cheng You can always use a second script to change the wording and remove it from the main script
0
Noelle Cheng
C A so remove the below
then add this to the bottom?
0
Sistema
Hello everyone, I carry out the process here but the attachment fields are not being hidden and the attachments are not becoming mandatory, could you help me?
style.css
#request_custom_fields_31964770778516_label,
#request_custom_fields_31964770778516 {
display: none;
}
script.js
// 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_32026654442260';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'Attachments cannot be blank';
var formDropdownClass = '.request_custom_fields_31964770778516, .request_custom_fields_30367309244953';
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();
0
Noelle Cheng
Everyone Does anyone know how to make it work for multiselect fields? I'm having trouble getting it to trigger for those. This is my code for just script.js and the bolded areas are the other elements that I changed.
// REQUIRE ATTACHMENTS FOR FORM WITH MULTISELECT
$(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_123456789';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'Documents selected to be submitted must be attached.';
var formMultiselect = '.request_custom_fields_987654321';
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 options are selected
function isFormAttachmentRequired() {
return $(formMultiselect + ' div.hc-multiselect-menu').attr('aria-checked') &&
$(formMultiselect + ' div.hc-multiselect-menu').text() === 'Selection1','Selection2','Selection3','Selection4';
}
// 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()) {
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);
}
})
0
VK_0000
Sorry to ping this post years later. I ran the code above and I get the error message when no file has been uploaded. But could one of you explain how to remove the rest ‘Attachment (optional)’. No matter what I do, I cant seem to remove it.
0