Tengo una sección simple de "contácteme" en mi sitio web y estoy tratando de descubrir cómo evitar que la página se actualice cuando un usuario ingresa un correo electrónico no válido. La razón por la que quiero evitar esto es porque cuando ingresan un correo electrónico no válido, la página se actualiza y los lleva a la parte superior de la página. Tengo un error que muestra lo que el usuario se perdió, pero tiene que desplazarse hacia abajo hasta la sección de contacto para verlo. No estoy seguro de cómo evitar que la página se desplace hacia la parte superior después de que se envíen. Todo lo que tengo ahora es una simple validación de formulario php. ¿Alguna sugerencia? ¿Esto se haría con JavaScript? ¿O puedo agregar esto a mi script de validación de php existente? No estás seguro por dónde empezar. ¡Gracias!
Nota al margen que estoy usando PHP para la validación de formularios.
¡FIJADO! Para evitar que la página vuelva a la parte superior, "index.php" de mi acción de formulario:
antes de
<form action="index.php" method="POST">después
<form action="" method="POST">ahora la página no se actualiza y no va a la parte superior de la página.
Depende de lo que entiendas por un correo electrónico no válido. Si se refiere al formato, entonces algo como esto es lo que debe usar, y el navegador verificará el correo electrónico por usted.
<label for='idEmail' class="required">Your email address</label> <input type='email' name='inpEmail' id='idEmail' class='full_width' maxlength='100' autocomplete='email' value=''> El bit crítico es hacer la entrada como tipo de email
El comentarista de arriba significa
e.preventDefault(). const handleSubmit = (e) => { e.preventDefault(); alert("you just clicked the button"). } <form onSubmit={handleSubmit}> <button type="submit" onClick={onSubmit}>Click Me</button> </form>Incluyendo que e.preventDefault() evita que la página se vuelva a cargar.
//Editar Intenté pegar el código de un sitio, pero SO me está dificultando el formato. Fue mi primer sitio web, así que no es el más bonito. Aquí está el enlace a GitHub: https://github.com/LazAustin/AldenForCongress/blob/main/contact.php
Las líneas 1-66 son el código PHP. La línea 192 es donde comienza el cuerpo del formulario (JS y Bootstrap). La línea 251 es un código JS para verificar las entradas.
Espero que esto ayude