¡Hola! Veo que estás teniendo algunas dudas sobre la validación de formularios en JavaScript. Entiendo que puede resultar un poco confuso al principio, pero estoy aquí para ayudarte a aclarar tus dudas.
El evento "invalid" se dispara cuando un formulario se envía y los campos no superan las validaciones HTML. Al utilizar "preventDefault", evitas que se muestren los mensajes por defecto, permitiéndote controlar la lógica de validación y los mensajes de error que deseas mostrar al usuario.
Los métodos "setCustomValidity" y "checkValidity" son parte del conjunto de funcionalidades que te permiten personalizar la validación de formularios en JavaScript. "setCustomValidity" te permite establecer un mensaje de error personalizado para un campo, mientras que "checkValidity" te permite comprobar si un campo cumple con las validaciones establecidas.
Es correcto que los mensajes establecidos con "setCustomValidity" no se muestran automáticamente, ya que su propósito es activar la propiedad "customError" cuando realizas las validaciones en JavaScript. Esto te da el control para mostrar los mensajes de error de la manera que consideres más adecuada para la experiencia del usuario.
Espero que estas explicaciones te hayan ayudado a aclarar tus dudas. Si necesitas más información o ejemplos específicos, no dudes en preguntar. ¡Estoy aquí para ayudarte en lo que necesites!
¡Saludos!
Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!