Presento el siguiente problema con invocar una función llamada validarFormulario()
(el HTML consiste en un formulario). Resulta que tras invocar la función con el evento onClick
, al hacer la llamada a esta función tras darle click al botón Enviar, la página me arroja el siguiente error:
Uncaught ReferenceError: validarFormulario is not defined at HTMLInputElement.onclick (Actividad_1.html:30:84)
var nombre = document.getElementsByTagName("input")[0];
var edad = document.getElementsByTagName("input")[1];
var email = document.getElementsByTagName("input")[2];
var comentario = document.getElementsByName("comentario")[0]; //referencio cada campo por su valor en la etiqueta 'name'.
function validarFormulario(event) {
let patronNombre = /^[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+$/; // PARTE D: Creo la condicion en fortma de expresión regular.
let valNombre = new RegExp(patronNombre); //creo un objeto de la clase RegExp que representa la expresión regular (PARTE D).
let patronEmail = /[a-zA-ZñÑ0-9_-^\s]+ @[a-zA-Z0-9_-^\s]+\.[a-z]{2,3}$/; //PARTE F.
let valEmail = new RegExp(patronEmail);
//parte C: Validar que el campo 'Nombre' no esté vacío
/*if (nombre.value == null){
alert("El campo 'Nombre' es obligatorio"); //Esto hace si el usuario no relleno nada en el campo 'Nombre'.
} else {*/
nombre.value = nombre.value.trim(); //Elimino los espacios en blanco tanto al principio como al final
if (nombre.value == "") {
alert("El campo 'Nombre' es obligatorio.");
nombre.focus();
event.preventDefault(); //Con esto, evito la ocurrencia del evento para esta funcion,
} else if (!valNombre.test(nombre.value)) {
//Parte D: Evalúa si el valor en el campo 'Nombre' cumple la condición.
alert("El campo nombre sólo acepta letras y espacios en blanco");
nombre.focus();
event.preventDefault();
//PARTE E: Validaciones sobre el campo 'Edad'.
} else if (edad.value == "") {
//SI ES VACÍO.
alert("Debe introducir un valor en el campo 'Edad' ");
edad.focus(); //pongo el foco en Edad
event.preventDefault(); //Impido la ejecucion del evento.
} else if (isNaN(edad.value)) {
//SI NO ES UN NÚMERO ENTERO.
alert("El campo debe ser un número");
edad.focus(); //pongo el foco en Edad
event.preventDefault(); //Impido la ejecucion del evento.
} else if (edad.value > 120 || edad.value < 0) {
// SL EL VALOR EN EL CAMPO 'EDAD' NO ESTÁ ENTRE 0 Y 120.
alert("Error: El campo 'Edad' debe estar comprendido entre 0 y 120"); // el valor numerico
edad.focus(); //Pongo el foco en 'edad'.
event.preventDefault(); //Nuevamente, impido la ejecucion del evento.
} else if (!valEmail.test(email.value)) {
alert("Email inválido.");
alert(
"El email debe contener carácteres alfanuméricos, seguido de un @, seguido de una extension de dominio, seguido de un punto (.), seguido de la extension del dominio. "
);
email.focus(); //Pongo el foco en el campo 'Email'.
event.preventDefault(); //Evito que se envíe si el usuario no introuce un email válido.
} else {
alert("Formulario Enviado"); //En el resto de los casos, cuando el usuario no deja vacío el campo 'Nombre'.
document.forms[0].submit(); //Hago envío del formulario
}
}
function EjecNombre(event, nombre) {
nombre.focus(); //Pongo el foco en el campo 'Nombre'.
event.preventDefault(); //Con esto, evito la ocurrencia del evento para esta funcion,
}
function EjecEdad(event, edad) {
edad.focus(); //pongo el foco en Edad
event.preventDefault(); //Impido la ejecucion del evento.
}
function EjecEmail(event, edad) {
email.focus(); //Pongo el foco en el campo 'Email'.
event.preventDefault(); //Evito que se envíe si el usuario no introduce un emailválido.
}
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Uso de Javascript para validar formularios</title>
<link rel="stylesheet" type="text/css" href="estilos_Actividad1.css" />
<script type="text/javascript" src="funciones_Actividad1.js"></script>
</head>
<body>
<div>
<form action="https://www.museoreinasofia.es/" method="post">
<!-- Enlace a la página del Museo Reina Sofía -->
<fieldset>
<legend>Datos de contacto</legend>
<table>
<tr>
<td><label for="nombre">Nombre:</label></td>
<td><input type="text" id="nombre" name="nombre" required /></td>
</tr>
<tr>
<td><label for="edad">Edad:</label></td>
<td><input type="text" id="edad" name="edad" /></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="text" id="email" name="email" required /></td>
</tr>
<tr>
<td>Sexo:</td>
<td>
<input type="radio" name="sexo" />Hombre
<input type="radio" name="sexo" />Mujer
</td>
</tr>
<tr>
<td colspan="2">
<label for="comentarios">Deja tu comentario aquí</label
><br /><textarea
id="comentarios"
name="comentarios"
rows="6"
></textarea>
</td>
</tr>
<tr>
<td>
<input
type="submit"
value="Enviar"
onclick="validarFormulario(event)"
/>
<input type="reset" value="Borrar" />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
Ya no se que hacer en estos casos. he intentado colocar el código en el body, he cambiado los parámetros de validarFormulario()
(colocándole y no colocándole el parámetro por defecto event). He cambiado los nombres de las variables, ya me cercioré de que están cerradas todas las llaves, paréntesis, corchetes y demás y me aparece el mismo error, he verificado que la ubicación del archivo funciones_Actividad1.js
está en el mismo directorio que Actividad_1.html
. No entiendo aun porque la página web me arroja este error. Quiero practicar hacer formularios usando solo Javascript y tuve la iniciativa de hacer este código. Agradezco de antemano toda la ayuda que me puedan ofrecer.
funciones_Actividad_1.js
lo estás llamando dentro del head comofunciones_Actividad1.js
, y no lo encuentra.body
, y los resultados son los mismos. Sigo presentando el mismo problema. De verdad no se que hacer al respecto.body
.src="funciones_Actividad1.js"
y luego, sin embargo, hablas de el como si se llamara de otro modo, cuando dices eso deCódigo de funciones_Actividad_1.js
. Fíjate que hay un caracter_
de más o de menos en alguno de los dos sitios. No se si te equivocastes al escribir la pregunta, o si justamente es eso lo que te está pasando, que en el head lo pones mal. Eso es lo que mis breves palabras querian darte a entender, pero no me cuesta nada enrollarme más para que lo veas o lo confirmes o desmientas./[a-zA-ZñÑ0-9_-^\s]+ @[a-zA-Z0-9_-^\s]+\.[a-z]{2,3}$/
no le gusta el caracter^
, así que lo he borrado, pero luego se queja de que al final de la misma función tienes tres caracteres de cerrado de llave}
de los cuales te sobra uno, porque te has comido unif/else
antes y no te has dado cuenta que la llave final estaba más abajo. Aquí te dejo el enlace con todo funcionando: jsfiddle.net/h2zpm1w4 (tambien te falta un <html> al inicio).