Tengo el siguiente HTML:
<form id="contactInfo" name="contactInfo"> <label>Name: </label> <input type="text" name="name"></input><br/><br/> <label>E-mail: </label> <input type="text" name="email"></input><br/><br/> <label>Message:</label><br/> <textarea rows="10" cols="80" name="message"></textarea><br/><br/> <input type="submit" name="sendMessage" onclick="messageChecker()"></input> </form>Y el siguiente Javascript:
function messageChecker(){ let x = document.forms["contactInfo"]["name"].value; let y = document.forms["contactInfo"]["email"].value; let z = document.forms["contactInfo"]["message"].value; if (x=="" || y=="" || z==""){ alert("Please fill out the indicated field(s)."); if (x==""){ document.forms["contactInfo"]["name"].style.border = "1px solid red"; } if (y==""){ document.forms["contactInfo"]["email"].style.border = "1px solid red"; } if (z==""){ document.forms["contactInfo"]["message"].style.border = "1px solid red"; } } }Entonces, quiero que aparezca el borde rojo cuando se envía el formulario y no se completa un campo; aparece por menos de un segundo, luego desaparece, junto con el texto ingresado. ¿Cómo puedo hacer para que se quede?
Debido a que está realizando un envío de formulario, si desea un comportamiento de estilo de aplicación en el que no envíe formularios y luego vuelva a cargar la página web, entonces necesita usar los tipos de envío de datos AJAX.
¿Cómo usar el enlace ajax en lugar del botón de enviar para el formulario?
¿Tal vez use un controlador e.preventDefault () para desbloquear su código?
El método preventDefault() se utiliza para evitar que el navegador ejecute la acción predeterminada del elemento seleccionado. Puede evitar que el usuario procese la solicitud haciendo clic en el enlace. Sintaxis:
event.preventDefault()