Tengo este código html donde index.html se carga primero. Tiene un campo de texto y un botón de enviar. Cuando se hace clic en el botón Enviar, llama a la función validateForm(). Supongamos que el campo de texto está vacío, debería alertar de que está vacío, si no lo está, se cargará una nueva página html (ya sea en la pestaña nueva o en la actual) que se supone que es bienvenido.html
Entonces mi problema es que el archivo welcome.html no se carga. Incluso cambié "welcome.html" en window.location.href = "welcome.html" a "https://www.google.com". La página todavía no cargaba. ¿Qué está mal y qué me estoy perdiendo aquí?
Cualquier ayuda es apreciada.
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form</title> <script src="/validateForm.js"></script> </head> <body> <form method="get" onsubmit="return validateForm()"> Name: <input type="text" name="name" id="name"> <input type="submit" value="Submit"> </form> </body> </html>validarForm.js
function validateForm() { var name = document.getElementById("name"); var nameData = name.value; if (nameData == "" || nameData == null) { alert("Name must be filled!"); } else { window.location.href = "welcome.html"; } }bienvenido.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Welcome :)</title> </head> <body> <h1>Welcome!</h1> </body> </html>action Puede usar el atributo de action en el formulario para reenviar a una URL en caso de éxito:
<form method="get" action="welcome.html" onsubmit="return validateForm()"> Name: <input type="text" name="name" id="name"> <input type="submit" value="Submit"> </form>Documentación: MDN - Atributo de acción de formulario
validateForm() ¿Mira esto?
onsubmit="return validateForm()"
Su validateForm no devuelve nada.
Es una convención que return false signifique "dejar de procesar el formulario" y un valor verdadero significa continue , lo que a su vez significa que el atributo de action mencionado anteriormente conduce a welcome.html como usted quería.
La función modificada podría ser esta:
function validateForm() { var name = document.getElementById("name"); var nameData = name.value; if (nameData == "" || nameData == null) { alert("Name must be filled!"); return false; } return true; } Alternativamente, asigne a validateForm un primer parámetro llamado event y llame a event.preventDefault() en lugar de devolver false.
Documentación: MDN - Ejemplo de manejo de envío de formulario
Necesita algunos cambios en el archivo index.html y en el archivo validateForm.js
índice.html
<form method="get" onsubmit="return validate()" action="javascript::window.location.replace('welcome.html')"> ... </form> y en validateForm.js debe devolver true o false después de la función de validación, si es true , se redirige a welcome.html o si es false , no se hizo nada.