0

en mi proyecto había creado dos archivos para validar los campos del formulario de cada pagina, por ejemplo Registro y Modificar, lo hice independiente para no cargar todo en un mismo archivo JS. En su momento me funcionó, validaba correctamente y agregaba las clases de manera correcta, hoy estoy revisando todo para entregar el trabajo (Es evaluativo de la universidad), y Oh! sorpresa, la validación del formulario no me funciona, estoy revisando y los archivos están bien vinculados, llamando los objetos al parecer está bien vinculados porque en la consola del navegador escribo la variable con la que capturo (Por ejemplo el formulario), y si me muestra normal, sin embargo al ejecutar el evento submit, me dice el mismo error.

Uncaught TypeError: Cannot read property 'addEventListener' of null

A modo de solución que he encontrado en este foro y otros me dicen que valide si viene el objeto,

const formRegistrar = document.getElementById('formRegistrar');

if(formRegistrar){
  formRegistrar.addEventListener('submit', (e)=>{
    if(!validar()){
      e.preventDefault();
      
    }
  });
}else{
  alert('Formulario registrar no existe');
}


El tema es que siempre al abrir cualquier pagina de mi proyecto, me salta la alerta, es decir como si la constante formRegistrar estuviese vacía.

ACTUALIZACION: Olvide poner mi codigo HTML

<form class="p-5 bg-light style-form" id="formRegistrar" method="POST">
    <button type="submit" class="btn btn-primary" name="btnRegistrar">      
      Registrar
    </button>
</form>

Agradezco de sus ayudas. Quedo al pendiente.

2
  • ¿Qué es lo que hace la función validar()?
    – BetaM
    el 22 nov. 2020 a las 0:29
  • Saludos @BetaM, sencillamente valida que otras funciones de validar lleguen en TRUE sino es así entonces retorna FALSE, solo valida los campos del formulario antes de enviar los datos al servidor... Ya di con la solución, puedes verla en esta pregunta ya respondida. el 22 nov. 2020 a las 0:46

1 respuesta 1

0

Bien en vista que ya puse mi pregunta y que no es recomendable eliminar preguntas, entonces daré con la solución que se me ocurrió y que me funcionó.

SOLUCION: Mi proyecto está construido mediante el patrón MVC trabajando con PHP, resulta que tengo un archivo llamado Plantilla, en el cual incluyo cada uno de los módulos páginas de mi proyecto (Para trabajar el tema de URL amigable), el error se debía a que cuando estaba en la página de inicio, efectivamente no se estaba cargando los objetos de mi pagina Registrar, por ende JS no podía encontrar el objeto el cual estaba asociando a la constante. Lo que hice fue, hacer la invocación del archivo JS, directamente en mi pagina correspondiente, de esta manera el error desapareció y las funciones ya corren de manera normal.

Así estaba con el error.....

PAGINA PLANTILLA

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titulo WEB</title>

</head>

<body>
  <main class="container-fluid">
    <!-- Seccion donde se carga las paginas -->
    <?php
    $rutas = array();
    if (isset($_GET["pagina"])) {
      $rutas = explode("/", $_GET["pagina"]);
      if (
        $rutas[0] == "inicio" ||
        $rutas[0] == "registro" ||
        $rutas[0] == "stock" ||
        $rutas[0] == "modificar"
      ) {

        include "modulos/" . $rutas[0] . ".php";
      } else {
        header('Location:' . SERVERURL);
      }
    } else {

      include "modulos/inicio.php";
    }
    ?>
  </main>
  <footer class="bg-primary">
    <p>Copyright &copy 2020-2</p>
  </footer>

  <!-- Project's JS Files -->
  <script src="<?php echo SERVERURL; ?>vistas/js/funciones.js"></script>
  <script src="<?php echo SERVERURL; ?>vistas/js/validar.actualizacion.js"></script>
  <script src="<?php echo SERVERURL; ?>vistas/js/validar.registro.js"></script>
</body>

</html>

Ahora les muestro como hice para solucionarlo, simplemente invoco el archivo en su pagina correspondiente y lo elimino de mi archivo plantilla.

PAGINA REGISTRO

<nav class="navbar bg-light">
  <a class="navbar-brand" href="inicio" id="brand">
    <h3 class="text-galada">LOGO WEB</h3>
  </a>
  <div class="d-inline">
    <a href="inicio" class="btn btn-primary my-2 px-4">
      <span class="mr-2"><i class="fas fa-home"></i></span>
      Inicio
    </a>
    <a href="stock" class="btn btn-primary my-2">
      <span class="mr-2"><i class="fas fa-laptop"></i></span>
      Ver Productos</a>
  </div>
</nav>
<div class="container">
  <form class="p-5 bg-light style-form" id="formRegistrar" method="POST">
    <button type="submit" class="btn btn-primary" name="btnRegistrar">      
      Registrar
    </button>
  </form>
</div>
<script src="<?php echo SERVERURL; ?>vistas/js/validar.registro.js"></script>

PAGINA MODIFICAR

<nav class="navbar bg-light">
  <a class="navbar-brand" href="inicio" id="brand">
    <h3 class="text-galada">LOGO WEB</h3>
  </a>
  <div class="d-inline">
    <a href="inicio" class="btn btn-primary my-2 px-4">
      <span class="mr-2"><i class="fas fa-home"></i></span>
      Inicio
    </a>
    <a href="stock" class="btn btn-primary my-2">
      <span class="mr-2"><i class="fas fa-laptop"></i></span>
      Ver Productos</a>
  </div>
</nav>
<div class="container">
  <form class="p-5 bg-light style-form" id="formActualizar" method="POST">
    <button type="submit" class="btn btn-primary" name="btnRegistrar">      
      Registrar
    </button>
  </form>
</div>
<script src="<?php echo SERVERURL; ?>vistas/js/validar.registro.js"></script>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.