3

Quiero insertar unos datos en una base de datos y estoy trabajando con verificaciones con javascript (es la primera vez que hago algo así).

Sin embargo, aunque no inserte nada, me registra los campos vacíos y no sé a qué se debe.

Me falta colocar el campo de cursos, por eso ese aún no está en la sentencia SQL.

También sigo trabajando con los datos de la fecha (ahí se logra ver en la sentencia) sin embargo no sé aún cómo colocar la fecha bien ya que me sale (0000-00-00).

Me gustaría saber si puedo guardar la fecha del sistema ya que la fecha la usare después para insertarla en un PDF.

Código HTML:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Certificación BV Gblobal</title>

    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/font-awesome.css">

    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/script.js"></script>
</head>

<body>

    <section class="formulario">

        <section class="informacion_contacto">
            <section class="titulos">
                <span class="certificado.png"></span>

                <h2>OBTENER<br>CERTIFICADO</h2>
                <h3>Sistema de Certificación - BV Global</h3>
            </section>
            <section class="info_items">
                <p><span class="fa fa-envelope"></span>[email protected]</p>
                <p><span class="fa fa-mobile"></span>(55) 8021 - 5093</p>
            </section>
        </section>

        <form action="insertarDatos.php" method="POST" class="formulario_usuarios">
            <h2>Captura de datos.</h2>
            <div class="user_info">
                <label for="nombre">Nombre(s).*</label>
                <input type="text" id="nombre" name="nombre">

                <label for="apellido">Apellidos.*</label>
                <input type="text" id="apellido" name="apellido">

                <label for="curp">CURP. (Solo ciudadanos méxicanos)</label>
                <input type="text" id="curp" name="curp">

                <label for="curso">Seleccionar curso*</label>
                <select>
                    <option value="1">ISO 9001:2015 Sistemas de gestión de la calidad</option>
                    <option value="2">ISO 14001:2015 Sistemas de gestión ambiental </option>
                    <option value="3">ISO 45001:2018 Sistemas de gestión de la seguridad y salud en el trabajo </option>
                    <option value="4">ISO 28000:2007 Sistemas de gestión para la seguridad de la cadena de suministro</option>
                    <option value="5">ISO 37001:2016 Sistemas de gestión antisoborno</option>
                    <option value="6">ISO 39001:2012 Sistemas de gestión de la seguridad vial </option>
                    <option value="7">ISO 31000:2018 Gestión del Riesgo – Directrices</option>
                    <option value="8">ISO 21001:2018 Sistemas de gestión para organizaciones educativas </option>
                    <option value="9">ISO 19011:2018 Directrices para la auditoría de los sistemas de gestión</option>
                </select>

                <label for="email">Correo electronico *</label>
                <input type="text" id="email" name="email">

                <input type="submit" value="ENVIAR" id="btnSend">
            </div>
        </form>

    </section>

</body>

</html>

Código Javascript:

$(document).ready(function() {

    $('#btnSend').click(function() {

        var errores = '';
        //var expReg = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;

        // Validado Nombre ==============================
        if ($('#nombre').val() == '' || $('#nombre').val() >= 30) {
            errores += '<p>Nombre inválido, verificar campo.</p>';
            $('#nombre').css("border-bottom-color", "#F14B4B")
        } else {
            $('#nombre').css("border-bottom-color", "#d1d1d1")
        }

        // Validado Apellido ==============================
        if ($('#apellido').val() == '' || $('#apellido').val() >= 30) {
            errores += '<p>Apellido inválido, verificar campo.</p>';
            $('#apellido').css("border-bottom-color", "#F14B4B")
        } else {
            $('#apellido').css("border-bottom-color", "#d1d1d1")
        }

        // Validado Correo ==============================

        // var esValido = expReg.test($('#email'));
        if ($('#email').val() == '') {
            errores += '<p>Correo electrónico invalido, verificar campo.</p>';
            $('#email').css("border-bottom-color", "#F14B4B")
        } else {
            $('#email').css("border-bottom-color", "#d1d1d1")
        }


        // ENVIANDO MENSAJE ============================
        if (errores == '' == false) {
            var mensajeModal = '<div class="modal_wrap">' +
                '<div class="mensaje_modal">' +
                '<h3>Errores encontrados</h3>' +
                errores +
                '<span id="btnClose">Cerrar</span>' +
                '</div>' +
                '</div>'

            $('body').append(mensajeModal);
        }

        // CERRANDO MODAL ==============================
        $('#btnClose').click(function() {
            $('.modal_wrap').remove();
        });
    });

});

Código PHP:

<?php
    include('conexion.php');
    
    $conn = mysqli_connect($db_host,$db_usuario,$db_password,$db_nombre);

    $nombre = $_POST['nombre'];
    $apellido = $_POST['apellido'];
    $curp = $_POST['curp'];
    //$fecha_enfermedad = $_POST['fecha_enfermedad'];s
    $email = $_POST['email'];
    $time = date("g:i a");
    

    $sql_query = "INSERT INTO datos_usuarios(nombre, apellido, curp, 
                  email)   
                  VALUES ('$nombre', '$apellido', '$curp', '$email')";

    $resultado = $conn -> query($sql_query);

    if ($resultado)
    {
        echo "Registro insertado";
    }
    else
    {
        echo "No se inserto";
    }
?>
3
  • Esta línea errores == '' == false no tiene sentido, parecen ser dos condiciones a evaluar y por tanto deberían estar separadas por algún operador lógico
    – user128299
    Commented el 30 jul. 2020 a las 6:08
  • Aunque tu código javascript tiene algunos problemas que han sido solucionados (en parte) por @Jose Noriega, existen otros que no están corregidos y, además, he de advertirte que el código sufre de los graves problemas de seguridad asociados a la inyección SQL que debe solucionarse con consultas preparadas o usando mysqli::real_escape_string(). (Redactando respuesta). Commented el 30 jul. 2020 a las 9:17
  • Terminé la redacción. Disculpa la tardanza, tuve que recrear el esquema de tu base de datos para poder crear un entorno similar al tuyo en el que probar las correcciones y mejoras. Commented el 30 jul. 2020 a las 10:56

3 respuestas 3

3

Introducción

Voy a enumerarte los errores más importantes que cometes en tu código Javascript:

  • Capturas el evento de pulsación del botón de envío, pero el formulario podría enviarse por pulsar el botón ENTER en cualquier campo de texto (por poner un ejemplo).
  • Las comprobaciones de longitud de los campos de texto son incorrectas.
  • No detienes el proceso del envío del formulario en caso de que haya errores en los campos del formulario.

Además, también estás cometiendo bastantes errores en el código PHP:

  • No compruebas la validez de los datos en el lado del servidor. Por mucho que tu javascript sea "robusto" haciendo comprobaciones, se deben validar de nuevo en el lado del servidor. Aunque no lo creas, se pueden saltar fácilmente.
  • Tu código no es robusto ante fallos. Debes comprobar si falló la carga de los datos de conexión (conexion.php), si se estableció correctamente la conexión al servidor MySQL y si la consulta SQL se realizó.
  • Tu código sufre de los graves problemas de seguridad asociados a la inyección SQL porque estás concatenando directamente lo que te envía el usuario a una consulta SQL. Puede solucionarse con consultas preparadas o usando mysqli::real_escape_string(). En el código propuesto, por sencillez, he usado mysqli_real_escape_string().
  • Las fechas deben introducirse en la base de datos en formato AAAA-MM-DD y el de las horas HH:MM:SS y la fecha y hora AAAA-MM-DD HH:MM:SS.

Además, podrías mejorar aún más las comprobaciones del formulario si usas los atributos maxlength y required.


Mejoras en Javascript

Captura del evento correcto

En mi código he capturado el evento del envío del formulario usando Javascript:

document.getElementById("formulario").addEventListener('submit', (e) => {

Para ello previamente tuve que agregar un id al campo <form>:

<form action="insertarDatos.php" method="POST"
    class="formulario_usuarios" id="formulario">

Comprobaciones de los campos

Hay problemas en la lógica de tus comprobaciones. Por ejemplo:

if ($('#nombre').val() == '' || $('#nombre').val() >= 30) {

En esta línea compruebas si el nombre está vacío y si su contenido convertido a número es superior a 30. Es probable que quieras comprobar si la longitud del nombre es superior a 30 caracteres. En ese caso deberías usar la propiedad String.length.

Por ejemplo:

let nombre = $('#nombre').val().trim();
if (nombre == '' || nombre.length >= 30) {

Además, estoy haciendo uso de String.trim para eliminar espacios en blanco antes y después del contenido.

Otra comprobación que debías revisar es:

if (errores == '' == false) {

Estás haciendo dos comprobaciones equivalentes a (errores == '') == false, que parece que no es lo que necesitabas.

Para comprobar si se agregó texto de error a la cadena podemos comprobar la longitud de la cadena:

if (errores.length > 0) {

Detener el envío del formulario

Además, si quieres que el formulario no se envíe cuando hay algún error, debes cancelar el evento haciendo uso de Event.preventDefault():

if (errores.length > 0) {
    /* Cancelamos el envío del formulario */
    e.preventDefault();

Mejoras en PHP

Blindar código ante errores

Debes blindar tu código ante condiciones de error, para que no se ejecuten partes críticas en caso de que no se cumplan las condiciones adecuadas o, al menos, se informe de esta eventualidad al usuario.

Por ejemplo, te recomiendo hacer este cambio:

include('conexion.php');
require 'conexion.php';

A diferencia de include, require finalizará la ejecución del script si no encuentra el archivo conexion.php.

Además, hay que comprobar que se estableció correctamente la conexión a MySQL:

$conn = @mysqli_connect($db_host, $db_usuario, $db_password, $db_nombre);
/* Hay que comprobar si la conexión se estableció correctamente */
if (mysqli_connect_error() !== NULL) {
    die('Error de Conexión: ' . htmlspecialchars(mysqli_connect_error()));
}

Escapar cadenas en consultas SQL

Si no se escapan las comillas en las cadenas que se concatenan al SQL, en el mejor de los casos fallaría la consulta, pero en el peor de los casos podrían explotar el problema usando inyección SQL.

Formato de fechas y horas

Las fechas deben introducirse en la base de datos en formato AAAA-MM-DD, las horas en formato HH:MM:SS y las fechas y horas como AAAA-MM-DD HH:MM:SS.

Sin embargo tú usas date("g:i a"). Ese código genera una hora del estilo a 11:43 AM que no es válido en un campo de hora.

Además, es mejor usar NOW() en SQL para que introduzca la fecha y hora del momento en el que se realiza la consulta SQL, sin necesidad de "calcularla" en el lado de PHP.

Mejoras en HTML

Puedes hacer uso de maxlength y required para comprobar que un campo no esté vacío y/o supere la longitud máxima deseada incluso ANTES del envío del formulario:

<input type="text" id="nombre" name="nombre"
    maxlength="30" required /><span class="validez"></span>

Además, puedes observar que he agregado un campo <span> inmediatamente posterior al campo <input> para alojar un símbolo ✖ o ✔ en caso de que el campo del formulario sea inválido o no haciendo uso del siguiente CSS:

input:invalid + .validez:after {
    color: red;
    content: '✖';
}
input:valid + .validez:after {
    color: green;
    content: '✔';
}

He hecho uso de las pseudoclases :valid e :invalid, además del selector hermano adyacente (+), para que cuando el formulario sea válido o no se cambie el color y contenido tras el elemento adyacente que tiene la clase validez.


Ejemplo en línea:

Repositorio de github con el código:

Probar en línea el funcionamiento:

Gitpod Ready-to-Code

4
  • 1
    Me ha funcionado muchas gracias ! Hice todas las mejoras que me mencionaste Commented el 1 ago. 2020 a las 0:42
  • 1
    Me alegra mucho haber sido de ayuda :) Commented el 1 ago. 2020 a las 7:14
  • Me ayudaste muchisimo, solo tengo una duda, ya que el javascript no me funciona para nada, es decir no se vincula con mi html... Me sugieres algo? O no sé si me podrias ayudar, soy totalmente nueva en esto Commented el 2 ago. 2020 a las 0:47
  • No entiendo a qué te refieres cuando dices que tu JavaScript no se vincula con tu HTML. Commented el 2 ago. 2020 a las 6:30
2

Para validar los campos del formulario puedes intervenir su evento submit por un momento, realizar las validaciones y en base a resultado de estas decidir si el evento submit debería continuar o no.

Las modificaciones que realicé en tú código son las siguientes:

  • Añadí una función para "serializar" los datos del formulario. Simplemente me regresa los campos en un objeto (clave y valor).
  • Agregué el ID en la etiqueta del form.
  • Usando jQuery me subscribí al evento submit del formulario, paré el comportamiento por defecto (Enviar la petición), coloqué tus validaciones y agregué la condición para saber si enviar la petición o mostrar el error que estás manejando.

Aquí el código:

$(document).ready(() => {
  const serializeForm = () => {
    const dataArray = $('#form-captura-de-datos').serializeArray();
    const output = {};
    dataArray.forEach((field) => {
      output[field.name] = field.value;
    });
    return output;
  };

  $('#form-captura-de-datos').on('submit', function (e) {
    // Paramos el comportamiento del formulario
    e.preventDefault();

    // Validaciones
    const { apellido, curp, curso, email, nombre } = serializeForm();

    let errores = '';

    if (nombre === '' || nombre.length >= 30) {
      errores += '<p>Nombre inválido, verificar campo.</p>';
      $('#nombre').css('border-bottom-color', '#F14B4B');
    } else {
      $('#nombre').css('border-bottom-color', '#d1d1d1');
    }

    // Validado Apellido ==============================
    if ($('#apellido').val() == '' || $('#apellido').val() >= 30) {
      errores += '<p>Apellido inválido, verificar campo.</p>';
      $('#apellido').css('border-bottom-color', '#F14B4B');
    } else {
      $('#apellido').css('border-bottom-color', '#d1d1d1');
    }

    // Validado Correo ==============================

    // var esValido = expReg.test($('#email'));
    if ($('#email').val() == '') {
      errores += '<p>Correo electrónico invalido, verificar campo.</p>';
      $('#email').css('border-bottom-color', '#F14B4B');
    } else {
      $('#email').css('border-bottom-color', '#d1d1d1');
    }

    // ENVIANDO MENSAJE ============================
    if (errores) {
      const mensajeModal =
        '<div class="modal_wrap">' +
        '<div class="mensaje_modal">' +
        '<h3>Errores encontrados</h3>' +
        errores +
        '<span id="btnClose">Cerrar</span>' +
        '</div>' +
        '</div>';
      $('body').append(mensajeModal);
      // CERRANDO MODAL ==============================
      $('#btnClose').click(function () {
        $('.modal_wrap').remove();
      });
    } else {
      // Continuamos con la petición
      e.currentTarget.submit();
    }
  });
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
  </head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <body>
    <section class="formulario">
      <section class="informacion_contacto">
        <section class="titulos">
          <span class="certificado.png"></span>

          <h2>OBTENER<br />CERTIFICADO</h2>
          <h3>Sistema de Certificación - BV Global</h3>
        </section>
        <section class="info_items">
          <p><span class="fa fa-envelope"></span>[email protected]</p>
          <p><span class="fa fa-mobile"></span>(55) 8021 - 5093</p>
        </section>
      </section>
      <form id="form-captura-de-datos" action="" method="POST" class="formulario_usuarios">
        <h2>Captura de datos.</h2>
        <div class="user_info">
          <label for="nombre">Nombre(s).*</label>
          <input type="text" id="nombre" name="nombre" />

          <label for="apellido">Apellidos.*</label>
          <input type="text" id="apellido" name="apellido" />

          <label for="curp">CURP. (Solo ciudadanos méxicanos)</label>
          <input type="text" id="curp" name="curp" />

          <label for="curso">Seleccionar curso*</label>
          <select name="curso">
            <option value="1">ISO 9001:2015 Sistemas de gestión de la calidad</option>
            <option value="2">ISO 14001:2015 Sistemas de gestión ambiental </option>
            <option value="3"
              >ISO 45001:2018 Sistemas de gestión de la seguridad y salud en el trabajo
            </option>
            <option value="4"
              >ISO 28000:2007 Sistemas de gestión para la seguridad de la cadena de
              suministro</option
            >
            <option value="5">ISO 37001:2016 Sistemas de gestión antisoborno</option>
            <option value="6">ISO 39001:2012 Sistemas de gestión de la seguridad vial </option>
            <option value="7">ISO 31000:2018 Gestión del Riesgo – Directrices</option>
            <option value="8"
              >ISO 21001:2018 Sistemas de gestión para organizaciones educativas
            </option>
            <option value="9"
              >ISO 19011:2018 Directrices para la auditoría de los sistemas de gestión</option
            >
          </select>

          <label for="email">Correo electronico *</label>
          <input type="text" id="email" name="email" />

          <input type="submit" value="ENVIAR" id="btnSend" />
        </div>
      </form>
    </section>
  </body>
</html>

Espero te ayude a continuar con tu código, saludos.

0
1

Ya tienes un par de opciones para mejorar el funcionamiento en el navegador, ahora falta corregir los problemas en PHP y lo primero que me llama la atención es que conectas a mysqli con estilo por procedimientos y luego ejecutas consultas con estilo por objetos con $conn->query(). Preferí completar esta respuesta con la segunda opción.

Nota: Sin importar lo que hayas logrado en el navegador, siempre debes validar los datos del lado del servidor, porque el usuario puede ser malicioso y saltarse muy fácilmente las reglas que pusiste en HTML y Javascript.

Verifica que cada dato necesario fue enviado en el formulario, de lo contrario, asigna un valor por defecto y que te sirva para realizar las validaciones. Con esto, tendrás todas las variables necesarias y evitarás posibles errores de índice no definido.

Las validaciones de nombre, apellido y curso son básicas, para CURP y correo electrónico se requiere comparar el valor usando expresiones regulares para asegurar que se tiene el formato adecuado; no voy a entrar en detalle sobre esto, solo comentar que hay cosas por mejorar en ambos casos.

Si las validaciones fueron correctas, ya se puede insertar usando sentencias preparadas para mejorar la seguridad y necesitas solo unos pequeños cambios:

  • NO ejecutar directamente con $conn->query()
  • En su lugar, crear una sentencia preparada con la consulta y signos de interrogación donde se van a colocar los valores
  • Después se enlazan los valores agregando una cadena, donde cada caracter corresponde al tipo de dato que se va a enlazar, seguida de todos los valores separados por coma
  • Ejecutas la sentencia, analizando si devolvió verdadero (exitosa) o falso (error) para mostrar el mensaje correspondiente.

Si hubo errores en las validaciones, solo muestras los mensajes.

<?php
include('conexion.php');

$conn = new mysqli($db_host, $db_usuario, $db_password, $db_nombre);

// Usar asignación ternaria para los campos
// (existe el campo en formulario)
//     ? entonces asignarlo a la variable
//     : de lo contrario, valor por defecto (cadena vacía o cero)
$nombre = (isset($_POST['nombre'])) ? trim($_POST['nombre']) : '';
$apellido = (isset($_POST['apellido'])) ? trim($_POST['apellido']) : '';
$curp = (isset($_POST['curp'])) ? trim($_POST['curp']) : '';
$email = (isset($_POST['email'])) ? trim($_POST['email']) : '';
// curso debe ser un número entero
$curso = (isset($_POST['curso'])) ? (int) $_POST['email'] : 0;
$fecha = date('Y-m-d'); // Solo fecha
// $fecha = date('Y-m-d H:i:s'); // Por si necesitas fecha y hora

// Crear un arreglo para almacenar los errores
$errores = [];
// Validaciones
if($nombre == '' || strlen($nombre) > 30) {
    $errores[] = 'El nombre no debe quedar vacío ni tener más de 30 caracteres.';
}
if($apellido == '' || strlen($apellido) > 30) {
    $errores[] = 'El apellido no debe quedar vacío ni tener más de 30 caracteres.';
}
if($curp != '' && !preg_match('/^[A-Z][AEIOUX][A-Z]{2}[0-9]{2}[0-1][0-9][0-3][0-9][MH][A-Z][BCDFGHJKLMNÑPQRSTVWXYZ]{4}[0-9A-Z][0-9]\z$/', $curp)) {
    $errores[] = 'Ingresa un CURP válido o deja en blanco si no eres mexicano.';
}
if($email == '' || !preg_match('/^(([^<>()[\]\\.,;:\s@"\']+(\.[^<>()[\]\\.,;:\s@"\']+)*)|("[^"\']+"))@((\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\])|(([a-zA-Z\d\-]+\.)+[a-zA-Z]{2,}))$/', $email)) {
    $errores[] = 'Ingresa una cuenta de correo electrónico válida.';
}
if($curso == 0) {
    $errores[] = 'Selecciona un curso.';
}

// Si no hay errores, insertar
if(count($errores) == 0) {
    $sql_query = "INSERT INTO datos_usuarios(nombre, apellido, curp, email, fecha, curso)
          VALUES (?, ?, ?, ?, ?, ?)";
    // Preparar sentencia
    $prep = $conn->prepare($sql_query);
    // Enlazar valores, los primeros 5 son cadena 's', curso es entero 'i'
    $prep->bind_param('sssssi', $nombre, $apellido, $curp, $email, $fecha, $curso);
    if($prep->execute()) {
        echo "Registro insertado";
    } else {
        echo "No se inserto";
    }
} else {
    echo '<p>Corrige los siguientes errores:<br>'  . implode('<br>', $errores) . '</p>';
}
3
  • Hola, lo quise hacer como tu me mencionaste, pero tengo una duda ya que al querer correrlo me sale esto: Advertencia : mysqli_stmt :: bind_param (): el número de elementos en la cadena de definición de tipo no coincide con el número de variables de enlace en C: \ xampp \ htdocs \ formulario \ insertarDatos.php en la línea 45 No se inserto ... En la linea 45 se encuentra esto: $prep->bind_param('sssssi', $nombre, $apellido, $curp, $email, $fecha, $curso); ...... Espero me pueda ayudar Commented el 31 jul. 2020 a las 23:11
  • 1
    @MayraXimenaVargas, revisa que todas las variables existen, tienen un valor adecuado y que en la sentencia aparecen 6 ?
    – Triby
    Commented el 1 ago. 2020 a las 19:51
  • Muchas gracias, ya lo pude resolver, me ayudaste mucho :) Commented el 2 ago. 2020 a las 5:26

Tu Respuesta

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

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