Enable save button when all the required fields are filled

Question

Below is the code to enable save button when all the required fields are filled. But, for some reason it is not working for the "audience" & "messagetemplate". Save button gets enabled even if these 2 fields are not filled.

const saveCommunicationButton = document.getElementById("save-communication-button")
const audience = document.getElementById("communicationdata_communication_audience")
const messageTemplate = document.getElementById("communicationdata_message_template")
const communicationName = document.getElementById("communicationdata_communication_name")
const description = document.getElementById("communicationdata_communication_description")
const campaignGroup = document.getElementById("communicationdata_campaign_group")
const campaignCategory = document.getElementById("communicationdata_campaign_category")
const campaignType = document.getElementById("communicationdata_campaign_type")
const campaignFrequency = document.getElementById("communicationdata_campaign_frequency")
const campaignDescription = document.getElementById("communicationdata_campaign_description")
// this is to check if the input for all 3 is valid.  if so, enable saveCampaignButton.
const checkEnableButton = () => {
  saveCommunicationButton.disabled = !(
    audience.value &&
    messageTemplate.value &&
    communicationName.value &&
    description.value &&
    campaignGroup.value &&
    campaignCategory.value &&
    campaignType.value &&
    campaignFrequency.value &&
    campaignDescription.value !== ""
  )
}
audience.addEventListener("change", checkEnableButton)
messageTemplate.addEventListener("change", checkEnableButton)
communicationName.addEventListener("change", checkEnableButton)
description.addEventListener("change", checkEnableButton)
campaignGroup.addEventListener("change", checkEnableButton)
campaignCategory.addEventListener("change", checkEnableButton)
campaignType.addEventListener("change", checkEnableButton)
campaignFrequency.addEventListener("change", checkEnableButton)
campaignDescription.addEventListener("change", checkEnableButton)

Answer 1

This is not how to test not not equal

audience.value &&
messageTemplate.value &&
communicationName.value &&
description.value &&
campaignGroup.value &&
campaignCategory.value &&
campaignType.value &&
campaignFrequency.value &&
campaignDescription.value !== ""

Why not add required to each field, then the form cannot be submitted

Alternatively use an array of IDs

const disable = ["save-communication-button", "communicationdata_communication_audience", "communicationdata_message_template", "communicationdata_communication_name", "communicationdata_communication_description", "communicationdata_campaign_group", "communicationdata_campaign_category", "communicationdata_campaign_type", "communicationdata_campaign_frequency", "communicationdata_campaign_description"]
  .some(id => document.getElementById(id).value.trim() === "")