¿Cómo enviar datos mezclando Java Script y PHP sin crear conflictos?

Publicado en 'Programación' por big_ed, 13 Ago 2019.





  1. big_ed

    big_ed Miembro maestro

    Registro:
    8 Ene 2019
    Mensajes:
    399
    Likes:
    9
    Temas:
    92




    Hola.

    Estoy haciendo un formulario cuyos datos van a ser enviados con PHP pero "limpiados / filtrados" con Java Script. Al inicio queria hacerlo todo con PHP (se complica menos el no mezclar dos lenguajes distintos), es decir también la limpieza de datos, pero luego me di cuenta que más rápido sería primero limpiar / filtrar los datos con Java S. para luego enviarlos con PHP... Pero hacer esta mezcla me ha generado una duda y un conflicto:

    1. Si ya estoy limpiando los datos con java script entonces no necesito hacerlo nuevamente con PHP, cierto?? Por lo tanto, funciones de PHP como trim(), stripslashes() y htmlspecialchars(), ya no deberian ser necesarias, correcto??? Abajo voy a poner mi codigo y veran como he limpiado los datos con js. Ademas como he limitado los caracteres extraños haciendo uso de las expresiones regulares.

    2. ¿Cómo hago para meter codigo PHP en Java Script sin ocasionar conflicto? Esto es dificil de explicar asi que lo mejor sera que vean mi codigo para que entiendan lo que quiero decir...En el ultimo "else" explico esta parte:

    Código:
    //CODIGO HTML... MI FORMULARIO
    //CODIGO HTML... MI FORMULARIO
    
    <form method="POST">
    <input type="text" name="text" maxlength />
    <input type="text" name="mail" maxlength />
    <input type="text" name="telf" maxlength />
    <textarea name="post" ></textarea>
    <input type="submit" value="Enviar Correo" maxlength />
    </form>
    
    
    
    //CODIGO JAVA SCRIPT... LA LIMPIEZA DE DATOS
    //CODIGO JAVA SCRIPT... LA LIMPIEZA DE DATOS
    
    <script>
    document.forms[0].onsubmit = function () {
    
    //recojo los valores de los campos
    var text = document.forms[0]['text'].value;
    var mail = document.forms[0]['mail'].value;
    var telf = document.forms[0]['telf'].value;
    var post = document.forms[0]['post'].value;
    //creo expresiones regulares, la primera que solo permite texto, y la segunda valida un correo legitimo
    var exp1 = /^[a-z\s]+$/i;
    var exp2 = /^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,9}$/;
    
    if ( text=="" || mail=="" || telf=="" || post=="" ) {
        alert( "Rellena todos los campos!" );
        return false
    } else {
        if ( text.length > 50 ) {
            alert( "El campo Nombre permite un máximo de 50 caracteres!" );
            return false
        } else if ( !exp1.test( text ) ) {
            alert( "Los nombres solo deben contener letras (mayúsculas o minúsculas) y espacios!" );
            return false
        } else if ( mail.length > 30 ) {
            alert( "El campo Correo permite un máximo de 30 caracteres!" );
            return false
        } else if ( !exp2.test( mail ) ) {
            alert( "Ingresa un correo válido!" );
            return false
        } else if ( telf.length > 11 ) {
            alert( "El campo Teléfono permite un máximo de 11 caracteres!" );
            return false
        } else if ( isNaN(telf) ) {
            alert( "Ingresa un número válido! Sólo hasta 11 digitos." );
            return false
        } else {
            //AQUI DEBERIA IR EL CODIGO PHP DE ENVIO DE DATOS
            Pero todo deja de funcionar cuando aqui agrego codigo php:
                  
           <?php
          echo $_POST["text"] . '<br>';
          echo $_POST["mail"] . '<br>';
          echo $_POST["telf"] . '<br>';
          echo $_POST["post"] . '<br>';
         ?>
        }
    }
    
    }
    </script>
     


  2. gnox

    gnox Miembro de bronce

    Registro:
    3 Ene 2013
    Mensajes:
    2,247
    Likes:
    883
    Temas:
    75
    1. O validas todo del lado cliente o validas todo del lado servidor. Si lo haces mixto se complica mas darle mantenimiento.
    2. Si los campos ya los tienes validados solo deja que fluya el post del form hacia el action retornando verdadero en la funcion de validacion (te falta el action del form). Aparte esa seccion que pones al final solo se va a ejecutar del lado servidor por lo que no deberia ser parte de una funcion JS sino del lado del render del php osea dentro de los tags de html.
     
  3. big_ed

    big_ed Miembro maestro

    Registro:
    8 Ene 2019
    Mensajes:
    399
    Likes:
    9
    Temas:
    92
    No se entiende!

    Si pudieras poner un ejemplo pequeño con codigo, de como
    trabajar con ambos, con js hacer la comprobacion y con php enviar los datos. Por favor..algo super resumido

    No puse el ACTION porque se supone, segun el manual, que si no pones nada por defecto manda los datos a la misma pagina...igual que si no especificas el METHOD te manda los datos via GET
     
  4. gnox

    gnox Miembro de bronce

    Registro:
    3 Ene 2013
    Mensajes:
    2,247
    Likes:
    883
    Temas:
    75
    Solo pon "return true;" dentro del ultimo else, y el php en ese else muevelo dentro de HTML debajo del form.
     
  5. G_Pisfato

    G_Pisfato Miembro maestro

    Registro:
    15 Nov 2015
    Mensajes:
    666
    Likes:
    80
    Temas:
    5
    Mejor sería que tengas los dos archivos separados:
    1. index.html
    2. cliente.js (que puede estar dentro del primero)
    3. servidor.php
    La validez sí o sí debería estar en el servidor ya que jamás se debe confiar en el cliente.
    En el atributo "action" apuntas a servidor.php lo que te conviene si algún día decides cambiar de destino final.
     
  6. big_ed

    big_ed Miembro maestro

    Registro:
    8 Ene 2019
    Mensajes:
    399
    Likes:
    9
    Temas:
    92
    Funciona, gracias.
    ¿Pero esta es la forma correcta de hacerlo?
    ¿Mi form va bien hasta ahora? (solo me falta el action)

    Notice: Undefined index: text in /opt/lampp/htdocs/php y sql/practice/web.php on line 61

    O sea me da la impresion de que js y php no estan conectados (que uno no sigue la consecuencia del otro). Porque ahora por ejemplo voy a tener que hacer una doble condicion para el SUBMIT:: la que hice con java script al presionar el boton SUBMIT, y otra con php , de nuevo para que al presionar SUBMIT recien me recoja los datos, y no antes, de esta forma evito ese mensaje NOTICE desagradable....
    Yo antes queria trabajar los formularios solo con PHP pero muchos me dijeron que no, que con js es mas rapida la comprobacion de datos (cosa que es cierto), pero no se, me parece desordenado trabajar con diferentes lenguajes porque mira al final tengo que hacer dos condiciones SUBMIT...no se si me explico

    ¿Te refieres a que, no deje de hacer la validacion tanto del lado del cliente como del lado del servidor?
    Pero entonces seria lo mismo que hacerlo solo con PHP...O sea ¿para que perder mi tiempo validando con js, si al final tambien debere hacerlo con php y me va a consumir lo mismo? Entonces mejor de arranque lo hago todo con PHP (evito escribir codigo doble con js)...yo lo hice con java s, porque me dijeron que es mas rapido y lo mas optimo

    Y en el ACTION ¿como proteges ese valor.... encerrandolo con el HTMLESPECIALCHARS? , asi:
    action="<?php echo htmlspecialchars("miarchivo.php");?>">
     
  7. gnox

    gnox Miembro de bronce

    Registro:
    3 Ene 2013
    Mensajes:
    2,247
    Likes:
    883
    Temas:
    75
    Son dos lenguajes distintos , js en una pagina web solo se ejecuta en el navegador, php se ejecuta del lado servidor el cual lo puedes reemplazar x cualquier otro, si quieres que php genere todo el archivo html + js no debes equivocarte en ningun tag y pensar que la logica del js le va a afectar al hacer el render de la pagina, si no quieres que te genere error al buscar un elemento de un arreglo primero pregunta si el arreglo o indice existe ..
     
  8. big_ed

    big_ed Miembro maestro

    Registro:
    8 Ene 2019
    Mensajes:
    399
    Likes:
    9
    Temas:
    92
    Acabo de programar otro formulario, pero esta vez solo con PHP.. Si puedes me dices si esta bien o le falta algo... Lo del action ahorita lo subo, es lo unico que falta.

    HTML:
    <form method="POST" autocomplete="off">
    <input type="text" name="text" maxlength />
    <input type="text" name="mail" maxlength />
    <input type="text" name="telf" maxlength />
    <textarea name="post" ></textarea>
    <input type="submit" value="Enviar Correo" name="SUBMIT" />
    </form>
    PHP:
    <?php


    if ( isset( $_POST['SUBMIT'] ) ) {

    //PRIMERA LIMPIEZA
    //PRIMERA LIMPIEZA
    function _clean $p ) {
    $cle trim$p );
    $cle stripcslashes$p );
    $cle htmlspecialchars$p );
    return 
    $cle;
    }

    $text _clean$_POST['text'] );
    $mail _clean$_POST['mail'] );
    $telf _clean$_POST['telf'] );
    $post _clean$_POST['post'] );
    $exp1 "/^[a-z\s]+$/i";
    $exp2 "/^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,9}$/";

    if ( empty( 
    $text ) || empty( $mail ) || empty( $telf ) || empty( $post ) ) {
    echo 
    "<script>alert( 'Rellena todos los campos!' )</script>";
    } else {
        
    //SEGUNDA LIMPIEZA
        //SEGUNDA LIMPIEZA
        
    if ( strlen$text ) > 50 ) {
            echo 
    "El campo Nombre permite un máximo de 50 caracteres";
        } elseif ( 
    strlen$mail ) > 30 ) {
            echo 
    "El campo Correo permite un máximo de 30 caracteres";
        } elseif ( 
    strlen$telf ) > 11 ) {
            echo 
    "El campo Teléfono permite un máximo de 11 caracteres";
        } elseif ( 
    strlen$post ) > 900 ) {
            echo 
    "El campo Mensaje permite un máximo de 900 caracteres";
        } elseif ( !
    preg_match$exp1$text ) ) {
            echo 
    "En el campo de Nombre ingresa solo letras, mayúsculas o minúsculas<br>";
        } elseif ( !
    preg_match$exp2$mail ) ) {
            echo 
    "Ingresa un correo válido!<br>";
        } else if ( !
    is_numeric$telf ) ) {
            echo 
    "Ingresa un número válido. Sólo números";
        } else {
            
    //AQUI ENVIO LOS DATOS LIMPIOS AL SERVER
        
    }
    }
        
    }


    ?>
     
  9. G_Pisfato

    G_Pisfato Miembro maestro

    Registro:
    15 Nov 2015
    Mensajes:
    666
    Likes:
    80
    Temas:
    5
    El cliente puede modificar el código a su antojo o pasarse por alto tu validación JavaScript.
    La validación que hagas con JavaScript será para que si algo está mal, le informes al usuario que "algo está mal" y por lo tanto no mandarás nada al servidor y así reduzcas peticiones y procesamiento inútiles.
    Si está bien, mandas al servidor.
    Ahora del lado del servidor hay que validar porque como dije al principio: el cliente puede evitar tu validación.
    Lee un poco de inyección SQL, pues aunque por ahora tal vez no estés usando alguna base de datos, quizás algún rato.
     
    A big_ed le gustó este mensaje.
  10. big_ed

    big_ed Miembro maestro

    Registro:
    8 Ene 2019
    Mensajes:
    399
    Likes:
    9
    Temas:
    92
    Si puedes revisa mi formulario nuevo hecho solo con php..esta en el comentario anterior (arriba)...solo dale un ojo a ver si esta bien o falta algo.

    Por ultimo ¿con que funcion es recomendable enviar los datos del formulario: Con mail o con otra (si es que hay)?
    En la seccion de webmasters me parece que he preguntando sobre estas cosas pero aun no me han respondido.
    Quiero saber el mejor metodo para enviar correos, y cuando es necesario usar mail o cuando una data base o fichero.
    O sea quiero saber todos los metodos de envio de datos que tiene php (por ejmplo mail y query(insert) ) y todas las maneras de almacenarlos (por ejemplo el mismo correo, database, ficheros, etc).
     
  11. G_Pisfato

    G_Pisfato Miembro maestro

    Registro:
    15 Nov 2015
    Mensajes:
    666
    Likes:
    80
    Temas:
    5
    A simple vista lo veo bien.
    La función 'mail' envía correos electrónicos usando SMTP local.
    Con respecto a si guardar o enviar datos, eso depende de ti.
    Si guardas en archivos diferentes de base datos, tú tendrás que crear tus funciones para obtener los datos.
    También puedes enviar por correo electrónico luego de guardar en la base de datos. El flujo lo defines tú.
     
  12. big_ed

    big_ed Miembro maestro

    Registro:
    8 Ene 2019
    Mensajes:
    399
    Likes:
    9
    Temas:
    92
    Pero lo mas comun es mandar usando la funciona MAIL de php??
    O sea ahi en mi codigo, en esa parte donde he puesto //AQUI VA PHP.-..Ahi deberia ir el mail() no?
     
  13. G_Pisfato

    G_Pisfato Miembro maestro

    Registro:
    15 Nov 2015
    Mensajes:
    666
    Likes:
    80
    Temas:
    5
    Es común porque usas el servidor SMTP del mismo servidor.
    Si quisieras usar otro servidor para enviar correos electrónicos, entonces te conectas a ese servidor y haces los envíos.
    Y sí, se supone que debes llamar a la función cuando ya está todo correcto y por eso debe ir ahí.
     
  14. big_ed

    big_ed Miembro maestro

    Registro:
    8 Ene 2019
    Mensajes:
    399
    Likes:
    9
    Temas:
    92
    Y sabes como es se haria esa conexion a ese otro servidor?
    solo es por curiosidad
    seria mas dificil o igual de facil que con mail?
    algo me dice que seria mas dificil, algo asi como tener que configurar tus propias cosas
    ¿no tendra que ver con eso del sockets que hasta ahora no aprendo?
     
  15. G_Pisfato

    G_Pisfato Miembro maestro

    Registro:
    15 Nov 2015
    Mensajes:
    666
    Likes:
    80
    Temas:
    5
    Tienes que crear una conexión a la otra computadora y...
    Puedes buscar bibliotecas si lo deseas y bastaría que tengas acceso a la API y así escribir las credenciales de otro servidor para que haga el envío.
     
  16. big_ed

    big_ed Miembro maestro

    Registro:
    8 Ene 2019
    Mensajes:
    399
    Likes:
    9
    Temas:
    92
    ah no, yo no me referia a eso,a pasar datos a otra pc, no.. yo me referia a pasarlos a un servidor web, solo queria saber si habia otros metodos, o mejor dicho queria saber cuales son todos los metodos que hay para pasar datos a un server, por ejemplo lo que te comente, el metodo mail, el de sql, esos metodo sirven para trasmitir datos a un server, simplemente me preguntaba si habian mas funciones de php para hacer eso...de la misma forma preguntaba si habian mas "almacenes virtuales" aparte de la base de datos, los ficheros y los correos, de que otra forma se podia almacenar...nada mas