Requiring CC Field

Hey Alek Reed

Add:

// Get the input element by its ID
var inputField = document.getElementById('request_collaborators_');

// Set the required attribute
inputField.required = true;

in your script.js:



the result:

This worked really well for me! Super simple and easy. Thank you again Jakub

Unfortunately, if it was working it has stopped working. After putting in the email address (clicking away, to make sure the CC takes it) I still get the required warning when trying to submit. Im not sure why its not recognizing that the field has content. Thoughts? Jakub

Alek Reed

This was not easy puzzle to solve, but I am hopeful the following code will work as expected, I tested it with one CC and it worked. 

document.addEventListener('DOMContentLoaded', function() {
    // Function to update the required attribute based on CC emails
    function updateRequiredAttribute() {
        var ccEmailItems = document.querySelectorAll('li[data-hc-pill="true"]');
        inputField.required = ccEmailItems.length === 0;
    }

    // Get the input element by its ID
    var inputField = document.getElementById('request_collaborators_');

    // Initially set the input as required
    if (inputField) {
        inputField.required = true;
    }

    // Create a MutationObserver to watch for changes in the CC email list
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                // Update the required attribute based on the presence of CC emails
                updateRequiredAttribute();
            }
        });
    });

    // Get the CC email list element
    var ccEmailList = document.querySelector('ul[data-hc-pills-container="true"]');

    // Start observing the CC email list for changes if it exists
    if (ccEmailList) {
        observer.observe(ccEmailList, {
            childList: true // Observe when new children are added or removed
        });
    }

    // Get the form element that contains the CC field
    var form = document.querySelector('form'); // Replace with the correct form selector if necessary

    // Add an event listener for form submission
    if (form) {
        form.addEventListener('submit', function(event) {
            // Check if at least one CC email has been added
            if (inputField.required && document.querySelectorAll('li[data-hc-pill="true"]').length === 0) {
                // Prevent the form from submitting
                event.preventDefault();

                // Display an error message to the user
                // You should replace this with a more user-friendly error display if desired
                alert('Please add at least one CC email before submitting the form.');
            }
        });
    }
});

It looks like initially it didn't work because there was no way to capture that a CC is actually added, there might be some JavaScript validation or event handling in Zendesk that is overriding this behavior and I had to work around that.

This script will:

1. Wait for the DOM to be fully loaded.
2. Get the input field and set it as required initially.
3. Create a MutationObserver to watch for changes in the CC email list.
4. If the CC email list exists, start observing it for changes.
5. When the list changes, update the required attribute based on whether any CC emails are present.
6. Add a submit event listener to the form that checks if the CC email list is valid. If not, it prevents the form from submitting and alerts the user.

Thank you Jakub - I can see how much time you put into that and I really, really appreciate it!

Jakub We are trying to use this same code to make our CC field required. Is this code still applicable in 2025? If so, where do we add it in the code? We have tried pasting it into the top and bottom of script.js, but there has been no change to the request form.