A continuación se muestra el código para habilitar el botón Guardar cuando se completan todos los campos obligatorios. Pero, por alguna razón, no funciona para la "audiencia" y la "plantilla de mensaje". El botón Guardar se habilita incluso si estos 2 campos no están llenos.
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)Esta no es la forma de probar no no es igual
audience.value && messageTemplate.value && communicationName.value && description.value && campaignGroup.value && campaignCategory.value && campaignType.value && campaignFrequency.value && campaignDescription.value !== "" ¿Por qué no agregar required a cada campo, entonces el formulario no se puede enviar?
Alternativamente, use una matriz de ID
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() === "")