0
152
Visualizações¿Es posible anular el texto en un cuadro de diálogo de error de validación?
Tengo un formulario construido en HTML, y para mantener las cosas simples y precisas, tengo lo siguiente (junto con otros 3 botones de radio <input> similares, envueltos en una etiqueta <form> :
<input id="Q1_r1" name="Question_1" required="" type="radio" value="Very Bad"><label class="radio" for="Q1_r1"><span style="padding-left:30px; font-size:13px;">Entonces, cuando intenta enviar este formulario sin elegir una opción de radio, obtenemos un error de validación:
Totalmente esperado, así que la pregunta que tengo es, ¿hay alguna forma de anular "cloud.chfsmail.ky.gov" en el cuadro de alerta por algo más fácil de usar?
1 Respostas
Responde à pergunta0
Por el bien de la posteridad, aquí hay un ejemplo simple de cómo se puede crear una ventana emergente de alerta personalizada para comunicar algo. al usuario (en este caso, el formulario no se enviará hasta que se completen todos los campos).
La idea clave es tener un contenedor dedicado para tu mensaje, cuya visibilidad cambias cuando quieres decir algo. ¡No olvides ocultarlo de nuevo!
const form = document.querySelector('form'); const overlay = document.getElementById('overlay'); form.onsubmit = (event) => { event.preventDefault(); if ([...form.querySelectorAll('input')].some(i => !i.value)) { overlay.textContent = 'All fields need filling out'; overlay.classList.add('active'); setTimeout(() => overlay.classList.remove('active'), 3000); } }; #overlay { position: absolute; top: 50vh; right: 50vw; background: lightgrey; padding: 8px 12px; display: none; } #overlay.active { display: block; } <form> <label> <input name="foo"> <span>Foo</span> </label> <label> <input name="bar"> <span>Bar</span> </label> <label> <input name="baz"> <span>Baz</span> </label> <button>Submit</button> </form> <div id="overlay"></div>