3

Estoy enviando y recibiendo datos con Ajax y PHP json, estoy realizando pruebas, la validaciones hasta el momento funcionan, pero no entiendo su proceso de validación.

Todos los input deben ser llenados para que al final se inserten los datos en la tabla en el siguiente código si me muestra los errores al dejar los campos vacíos, pero es seguro la manera empleada es decir no se escaparan el envío de datos vació a las columnas de la tabla de datos.

if (isset($_POST['editor'])) {
    $title = $_POST['title'];
    $mini_title = $_POST['mini_title'];
    $discreption = $_POST['discreption'];

    if (empty($_POST['title'])) {
        echo json_encode(['status'=> false, 'message'=> ["title" =>"Ingrese datos uno"]]);
        exit;
    }

    if (empty($_POST['mini_title'])) {
        echo json_encode(['status'=> false, 'message'=> ["mini_title" =>"Ingrese datos dos"]]);
        exit;
    }

    if (empty($_POST['discreption'])) {
        echo json_encode(['status'=> false, 'message'=> ["discreption" =>"ingrese datos tres"]]);
        exit;
    }

    // Si todos los datos son llenados correctamente
    // Insertar los datos en la tabla
    //$stmt = $c->prepare("INSERT INTO articulos (title, mini_title, discreption) VALUES (?, ?, ?)");
}

formulario

<form name="form" action="" id="form" method="post" role="form">
    <h3>Edición</h3>
    <br />
    <label>Titulo</label>
    <input type="text" name="title" id="title">
    <label>Titulo Noticia</label>
    <input type="text" name="mini_title" id="mini_title">
    <label>Discrepción</label>
    <input type="text" name="discreption"  id="discreption" />
    <br>
    <input type="submit" name="editor" id="submit_boton" value="Insertar Articulo" />
</form>

Estoy usando un código ajax que encontre aquí ¿Cómo ocultar formulario y luego de un cierto tiempo redireccionar a otra página?

$(function() {
    var frm = $('#resetform');
    frm.submit(function(e){
        e.preventDefault();
        var formData = frm.serialize();
        formData += '&' + $('#submit_btn').attr('name') + '=' + $('#submit_btn').attr('value');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: formData,
        })
        .done(function(data) {
            let res = JSON.parse(data);
            if(res.status){
                $('#message').fadeIn();
                $('#message').html(res.message).delay(3000).fadeOut(3000);
                $(frm).hide();
        setTimeout(function(){
            location.href = 'index.php';
        },2000);
      } else {
        $('#message').fadeIn();
        $('#message').html(res.message).delay(3000).fadeOut(3000);
      }
        })
        .fail(function() {
            $('#message').fadeIn();
            $('#message').html(textStatus).delay(2000).fadeOut(2000);
        })
    });
});
9
  • 1
    La validación como tal es correcta. Aunque se puede simplificar. De todos modos, yo relegaría dicha validación del lado del cliente con cualquiera de los métodos disponibles, por ejemplo, poniendo required a los campos obligatorios o con un validador de Javascript. Eso aliviaría la carga del servidor, evitando que éste haga un trabajo que el cliente puede hacer perfectamente. Esa comunicación cliente/servidor en la que es el servidor quien debe decirte que los datos no son correctos es preferible evitarla, estableciendo mejores controles del lado del cliente.
    – A. Cedano
    el 16 ago. 2018 a las 20:26
  • @A.Cedano Hola, disculpe si estoy usando Ajax, también se puede validar con javascript cuando son datos enviados por ajax
    – Mateo
    el 16 ago. 2018 a las 20:29
  • @A.Cedano De que manera la podría simplificar, el formulario de insertar datos solo son para los administradores, entonces creo que no perjudicaría mucho hacer llamadas al servidor :)
    – Mateo
    el 16 ago. 2018 a las 20:31
  • Claro, los datos que tú envías por Ajax los recoges mediante Javascript (del lado del cliente). Es ahí donde debes asegurarte que no hay datos enviados antes de hacer la petición Ajax, de ese modo no haces un viaje de balde. Para poner un ejemplo, cuando te piden una mercancia, debes revisar el paquete antes de enviarla, si no revisas y envías el paquete vacío: gasto de recursos, de combustible, de tiempo, de personal... enfado del receptor que te dirá que le enviaste un paquete vacío. Aquí aplica el mismo principio, no sé si me explico.
    – A. Cedano
    el 16 ago. 2018 a las 20:33
  • Con que le pongas required a los inputs que sean obligatorios ya estarás evitando que se envíen datos vacíos, por ejemplo: <input type="text" name="title" id="title" required> y si quieres implementar una validación adicional, puedes por ejemplo tener por defecto en botón Enviar del formulario desactivado y activarlo solamente cuando todos los inputs requeridos tengan datos. Es una entre muchas otras formas de controlar del lado del cliente y de escribir código coherente. Si te fijas en muchos sitios, ciertos botones no se activan hasta que los formularios no están bien completados.
    – A. Cedano
    el 16 ago. 2018 a las 20:40

2 respuestas 2

1

Mateo, este es un ejemplo de lo que decía en comentarios.

El botón se muestra por defecto en un estado deshabilitado y sólo se habilitará cuando todos los inputs estén llenos.

El código funciona en este orden:

  • Con document.querySelectorAll seleccionamos todos los inputs del formulario.
  • Luego, agregamos a cada input un listener que se activará cada vez que se escriba en cualquiera de los input. En la lógica de ese bucle la variable isEmpty se establecerá a true cuando encuentre al menos uno de los input vacíos y saldrá del bucle. El código escucha constantemente los input. Puedes probar por ejemplo a llenarlos todos y verás como el botón se pone en estado activo. Pero si luego borras los datos de alguno de los input el botón se vuelve a desactivar :)
  • Finalmente, el estado del boton (activado o desactivado) dependerá del estado de la variable isEmpty. Si es verdadero el botón seguirá estando deshabilitado.
  • El código controla también que los inputs no estén llenos con falsos datos, mediante trim() se verifica que no haya sólo espacios en blanco.
  • Todo lo relativo a Ajax debes ponerlo en este bloque btnSubmit.addEventListener("click", function(e) {, que será el listener que escuche los clicks en el formulario.

Espero te sea de utilidad.

var btnSubmit = document.getElementById('submit_boton');
var allInputs = document.querySelectorAll("#form input[type=text]");

allInputs.forEach(el =>
  el.addEventListener('keyup', () => {
    var isEmpty = false;
    allInputs.forEach(function(element) {
      var theValue = element.value.trim();
      if (theValue == '') {
        isEmpty = true;
        return;
      }

    });
    btnSubmit.disabled = isEmpty;
  }))

btnSubmit.addEventListener("click", function(e) {
  e.preventDefault();
  //Aquí la petición Ajax
});
<form name="form" action="" id="form" method="post" role="form">
  <h3>Edición</h3>
  <br />
  <label>Titulo</label>
  <input type="text" name="title" id="title" required />
  <label>Titulo Noticia</label>
  <input type="text" name="mini_title" id="mini_title" required />
  <label>Descripción</label>
  <input type="text" name="discreption" id="discreption" required />
  <br>
  <input type="submit" name="editor" id="submit_boton" value="Insertar Articulo" disabled/>
</form>


Código PHP

En cuanto al código PHP, no me preocuparía tanto de enviar un mensaje personalizado por cada input que no sea llenado. En cualquier caso (y si eso fuera útil para alguna cosa), se podría hacer desde Javascript adaptando el código de más arriba.

Del lado del servidor lo más importante es escribir un código que sea coherente con la petición que se está haciendo desde Ajax. Es decir, si la petición Ajax espera un objeto JSON, el código de servidor debe devolver, pase lo que pase, un objeto JSON que informe de lo ocurrido.

En esta lógica se va manejando una variable llamada $arrResult que irá recogiendo las eventualidades del código. Si hay fallos tendrá una clave false y un mensaje con el error ocurrido. Si la inserción se hace correctamente, tendrá una clave true indicando que los datos se insertaron bien. Luego del lado de Ajax de puede buscar la clave false o true de la respuesta para saber qué hacer o qué mensajes mostrar.

Como algo adicional, aunque ya validamos del lado del cliente, podemos hacer una validación del lado del servidor, pero más simple, usaremos operadores ternarios, preguntaremos si cada clave del POST está vacía, si lo está le asignamos NULL a la variable, si no está le asignamos el valor que traiga en el POST. Luego preguntamos por las tres variables juntas, sin ninguna está vacía procedemos a la inserción.

Importante: en la inserción usaremos las variables que fueron creadas para recoger los datos mediante los operadores ternarios.

<?php
if (isset($_POST['editor'])) {
    $title       = (empty($_POST['title']))       ?  NULL  :  $_POST['title'];
    $mini_title  = (empty($_POST['mini_title']))  ?  NULL  :  $_POST['mini_title'];
    $discreption = (empty($_POST['discreption'])) ?  NULL  :  $_POST['discreption'];

    if ($title && $mini_title && $discreption) {
        /*
            Si todos los datos son llenados correctamente
            Insertar los datos en la tabla
            NOTESE que en la inserción usaremos las variables $title, $mini_title, $discreption
            $stmt = $c->prepare("INSERT INTO articulos (title, mini_title, discreption) VALUES (?, ?, ?)");
            Aquí quizá convendría hacer una verificación de que hubieron filas insertadas REALMENTE
        */
        $arrResult=array('status'=> true, 'message'=>'Se insertaron los datos correctamente');    
        
    }else{
        $arrResult=array('status'=> false, 'message'=>'Faltan datos en alguno(s) de los inputs');            
    }
}else{
    $arrResult=array('status'=> false, 'message'=>'No se posteó nada en el campo editor');                    
}
echo json_encode($arrResult);   
?>
2
  • Gracias, por favor solo una molestia, puedes escribir en ideone.com, como podría optimizar el código PHP ideone.com/gjiPul, como comentantes en un comentario, que la validación empleada era correcta pero se podría optimizar, puedes decirme cómo, para yo aprender ese proceso.
    – Mateo
    el 18 ago. 2018 a las 3:16
  • @Mateo he editado la respuesta con algunas indicaciones relativas al código PHP.
    – A. Cedano
    el 18 ago. 2018 a las 3:43
0

yo le dejaria la validacion al cliente es decir con javasceript es mucho mas eficiente y mucho mas practico ya que le estan quitando esa carga al servidor seria algo como

<script>
   $(document).ready(function(){
   $("#form").submit(function(e){//capturamos el evento submit del form

   var titulo=$("#title").val()
   var mini= $("#mini_title").val()
   var desc=$("#discreption").val()

    titulo.trim()//evitar que llene los inputs con espacios
    mini.trim()
    desc.trim()

  if(titulo=="" || mini="" || desc==""){


   $("#resultados").append("todos lo campos son requeridos")//mostrar el error en un div o alert 


     return false;
  }




     e.preventDefault();//evitar enviar el formulario


  })
})   
</script>

por supuesto que hay que hacer mucho mas validaciones pero eso dependera de ti hay muchas librerias para validaciones pero recuerda que la practica por ti mismo es mucho mejor

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.