0

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.

6
  • No se yo si el problema será que funciones_Actividad_1.js lo estás llamando dentro del head como funciones_Actividad1.js, y no lo encuentra.
    – masterguru
    Commented el 13 oct. a las 9:34
  • masterguru primero lo intente en el head como dices y como, tengo entendido yo, que se hace usualmente con el script de JavaScript, incluso también probé colocándolo en el body, y los resultados son los mismos. Sigo presentando el mismo problema. De verdad no se que hacer al respecto.
    – gtd31
    Commented el 13 oct. a las 11:36
  • @gtd31, lo que master te señala es que basándonos en tu pregunta, hay una discrepancia con el nombre del archivo. Es decir, el archivo tiene un nombre diferente del que utilizas para cargarlo, por eso no te funciona. Con respecto a la ubicación, por lo que se vé debería cargarlo antes de cerrar el body.
    – Marcos
    Commented el 13 oct. a las 12:08
  • Fíjate en tu pregunta, mira la línea del head donde llamas al archivo, donde pones src="funciones_Actividad1.js" y luego, sin embargo, hablas de el como si se llamara de otro modo, cuando dices eso de Có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.
    – masterguru
    Commented el 13 oct. a las 12:25
  • 1
    Bueno, siendo así he revisado todo el código en jsfiddle.net y me ha marcado dos errores en el javascript. Según parece en esta cadena /[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 un if/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).
    – masterguru
    Commented el 13 oct. a las 16:29

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.