Siguiendo este ejemplo , creo un dialog simple que contiene un form :
const diag = document.querySelector("#diag") diag.addEventListener("close", () => { if (!diag.returnValue) { return; } document.querySelector(".result").textContent = document.querySelector("#txt-name").value; }); document.querySelector("#btn-show").addEventListener("click", () => { diag.showModal(); }); <dialog id="diag"> <form method="dialog"> <input id="txt-name" required /> <button value="submit">Submit</button> <button value="">Cancel</button> </form> </dialog> <button id="btn-show">Show Dialog</button> <p>Result: <span class="result"></span></p> Sin embargo, dado que la input tiene un atributo required , el usuario no puede hacer clic en ella sin completarla. Sé que puedo agregar un evento de click al botón Cancelar y cerrar el cuadro de diálogo, pero tengo muchos cuadros de diálogo como este y es mejor si hay una solución nativa general.
Necesito una solución que cierre el diálogo; y establece su returnValue en vacío ("") si dicho botón genera un evento de close .
Solución actual:
document.querySelector("#btn-cancel") .addEventListener("click", () => { diag.close(""); // Have to set this since onclose event is raised. })Creo que debería usar dialog.close() en su detector de eventos de cancel button . Si lo hace, descartará todo el diálogo y, por lo tanto, eliminará todas las inputs sin completar. El formulario no se enviará en dialog.close() .