Requiring a ticket attachment if a particular dropdown option is selected

Hi 367254856428

Thank you for your quick reply.

I did what you suggested and I get a different output:

However, this results in 1:

366686281727 this problem that you and 397366577434 are having is very strange. Can you locate this line in your code:

var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');

And add this code under it:

console.log('attachmentErrorElt.length: ' + attachmentErrorElt.length);
console.log('attachmentErrorNotification: ' + attachmentErrorNotification);

Then open the development console and run your test. What is output in the console?  When I tested in the Copenhagen theme where I added Fikri's code, this was my output:

 

 

Hi Karen D Snyder

First of all: Thank you for this article!

I encounter the same problem as Fikri Akbar Hedianto ("Attachment: cannot be blank" message). I followed your steps exactly in the console and it indeed changed to: "Hello!" 

Any advice?

 

397366577434

I used a default Copenhagen theme to make sure that I was starting from scratch, and put your code into script.js, inside the document ready function. The only change that I made was to change your field ID to the field ID of my form's checkbox in the line that sets attachmentCheckboxField. Note that the code that you pasted above has an extra } at the end, which caused a console error. 

When I removed the extra }, that fixed the console error. When I opened the form with the checkbox and clicked Submit without attaching anything, I got the correct error notification Report must be attached.

So does your code have the extra } at the end? That could be the problem.

Hi Karen D Snyder,

I have tried to check in the console, everything is working fine. But it seems like the "if" for error check is not being read at all on my end.

Below is my code, I may miss something here.

// 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;
}
};
// 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_360026907032';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'Report must be attached';
var formObserveMutationOptions = { childList: true, subtree: true };

function setFormAttachmentCheckbox() {
if ($('#request-attachments-pool .upload-item').length) {
selectCheckbox(attachmentCheckboxId);
}
else {
clearCheckbox(attachmentCheckboxId);
}
}

// Clear checkbox
function clearCheckbox(eltselector) {
$(eltselector).prop('checked', false);
}

// Select checkbox
function selectCheckbox(eltselector) {
$(eltselector).prop('checked', true);
}

// If attachment checkbox field exists, select it,
// and watch for changes to attachments and dropdown
if ($(attachmentCheckboxId).length) {
clearCheckbox(attachmentCheckboxId);
startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
}
// Adjust attachment error notification
var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
if (attachmentErrorElt.length) {
attachmentErrorElt.text(attachmentErrorNotification);
}
}

Jennifer Neer,

The way that the code should work is that your form should contain a custom checkbox field that is hidden. It should be selected at the start. Then if the specific option is selected by the user (or in your case, a certain form is selected), the checkbox is selected by code if there is at least one attachment, or cleared if there are no attachments. One way to get an idea of what is going on would be to show the checkbox, and observe whether it is ever selected. You can do this by entering the following in the developer console, where you replace XXX with the custom field ID:

$('#request_custom_fields_XXX').show();

Feel free to paste in the code, and then I can take a look to see if I can spot anything.

 

Hello,

I'm trying this code on our help desk but I'm having an issue where it still displays the error even when I there is an attachment present and I'm not quite sure where the issue is.  I have also made to add the code for ObserveMutations.  Any guidance as to where to look?  I'm also requiring the attachment based on the form that is selected, not a custom field, in case that makes a difference.

I'm happy to paste in any of the code to look over as well.  Thanks!!

397366577434,

In your script.js, there should be a line of code like the below, where XXXXX is the custom field ID for the checkbox:

var attachmentCheckboxField = 'request_custom_fields_XXXXX';

Please try this:

1. Do whatever scenario you need, to get the notification  "Attachment: cannot be blank" to appear

2. In the developer tools console, please type the following, replacing the first line with the line from your code::

var attachmentCheckboxField = 'request_custom_fields_XXXXX';
var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
attachmentErrorElt.length;

Is the displayed length 1? If not, then there is a problem somewhere in the code.

If the displayed length is 1, then type the following in the console, and let me know if the displayed notification changes to Hello!

attachmentErrorElt.text('Hello!');

This is my console output from doing the above steps:

When I typed the last command, the notification changed:

Karen D Snyder

 

I am able to receive error message but just the default "Attachment: cannot be blank" message when I already put the script below which should change the error notification message:

var attachmentErrorNotification = 'Report must be attached';

 

I also have added the startObserveMutations code to observe the change in the form and everything is working, only the error notifications that seems to be skipped.

Hi 397366577434,

Just to double-check, I did realize that my original post had omitted the function startObserveMutations, which I provided in this comment: https://support.zendesk.com/hc/en-us/community/posts/360028913434/comments/360009177754. Did you see that comment, and add the code for startObserveMutations?

If you did add the code for startObserveMutations, then can you explain further in what way the code is not working: Is an error notification appearing like the one below when you click Submit and you have no attachment?

Or are you not getting any error notification at all when you click Submit and you have no attachment?

Please let me know, and then I can trouble-shoot further.