Ver Mensaje Individual
  #20 (permalink)  
Antiguo 22/01/2013, 17:39
Avatar de emprear
emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Que hacer con javascript

Vamos a empezar desde cero, porque en algún punto, te estás, me estoy ó nos estamos perdiendo.
Por favor, usá un poco la imaginación...
Supongamos que tenés este sencillo formulario que agrega un usuario a tu BD (voy a desglosar el form y el php que lo procesa para que lo entiendas mejor)

registrar_usuario.html

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>Registrar usuario</title>
  5. <script type="text/javascript">
  6. //<![CDATA[
  7. function validar(){
  8. var elNombre = document.getElementById('nombre');
  9. if(elNombre.value == ''){
  10. document.getElementById('error_nombre').innerHTML = "Falta nombre";
  11. return false;
  12. }
  13. }
  14. //]]>
  15. </head>
  16. <form action="agregar_usuario.php" method="post" onsubmit="return validar();">
  17. <p>
  18. <label for="nombre">Nombre</label>
  19. <input type="text" value="" id="nombre" name="nombre" autocomplete="off" />
  20. <span id="error_nombre"><!-- mensaje de error --></span><br /><br />
  21. <input type="submit" value="procesar" name="procesando" />
  22. </p>
  23. </form>
  24. </body>
  25. </html>

muy sencillito, un form con un input cuyo valor se pasa por post y se agrega a la BD.
El php que recoge, definido en el action, agregar_usuario.php

Código PHP:
Ver original
  1. <?php
  2. if(isset($_POST['procesando'])){
  3. // conectás a la BD
  4. // hacés un insert
  5. // verificás que se hizo el insert (vamos a suponer que si lo hizo)
  6. // presentás un mensaje al usuario
  7. echo "registro agregado";
  8. }
  9. ?>

Como no voy a crear una base de datos real, imagina lo que está en las lineas comentadas.
Como verás nuestro html, incluye una validación(muy elemental y bastante mal hecha, pero tené en cuenta que es solo un ejemplo) hecha en javascript.
Esta validación dice, sencillamente, que si el campo nombre está vació, devuelva "false" (acordate de esto para más adelante), ya que por supuesto NO nos interesa que nos agreguen registros en blanco.
En javascript, las acciones del mouse, teclado, etc, generan eventos. Hay un evento en particular, el onsubmit, que se utiliza en los forms. Solo hay 2 formas de generar este evento, y es activando (via mouse, o teclado, ó un "touchScreen", ahora que están de moda) cualquiera de estos 2 elementos
un input type="submit"
un <button></button>
siempre y cuando, obviamente, estén dentro de una etiqueta
<form>
</form>
si te fijas, no hacemos simplemente onsubmit="validar()" sino que hacemos
onsubmit="return validar()", la diferencia esta en que haciéndolo de la 2ª forma, no el evento no solo dispara la función sino que espera una respuesta de esta. Por lo tanto, y analizando la función en si misma, si se devuelve un 'false' (el campo está vació), el submit del form se cancela, así de simple, y nos evitamos que se dirija al action ejecutando el php innecesariamente.
Vamos a algo práctico ahora, usemos firefox para el ejemplo, el usuario puede hacer esto

con lo cual de nuestro html lo que sigue se ignora olimpicamente

<script type="text/javascript">
//<![CDATA[
function validar(){
var elNombre = document.getElementById('nombre');
if(elNombre.value == ''){
document.getElementById('error_nombre').innerHTML = "Falta nombre";
return false;
}
}
//]]>
</script>


si presionás el submit, vas al action sin más vueltas y aunque el campo nombre esté vacío, vas a ver el mensajito registro agregado, cual es la solución entonces, lo que ya te dijimos, validar en el php, cambiemos nuestro php por lo siguiente

Código PHP:
Ver original
  1. <?php
  2. if(isset($_POST['procesando'])){
  3.    
  4.     if($_POST['nombre'] == ""){
  5.         echo "El nombre no puede estar vacío";
  6.         exit; // SALIMOS DEL PHP SIN HACER MAS NADA
  7.     }else{
  8. // conectás a la BD
  9. // hacés un insert
  10. // verificás que se hizo el insert (vamos a suponer que si lo hizo)
  11. // presentás un mensaje al usuario
  12. echo "registro agregado";
  13. }
  14. }
  15. ?>

te aclaro que mis validaciones son sumamente precarias, es solo para que comprendas la idea de como es el proceso

Se entiende @XD2XD2?

Seguramente te preguntarás. entonces para que mie#@!# usar javascript para validar, bueno, antes de contestarte te pido que nuevamente recurras a tu imaginación, e imagines formularios mucho más complejos que incluyan
validación de email
un valor dentro de un rango
fechas
cantidad de caracteres
selects
selects múltiples. etc, etc, etc

Como javascript se ejecuta del lado del cliente, lo va a hacer más rápido, vas a evitar que el php tenga que validar todo con la consiguiente demora, presentar los mensajes y redirigir nuevamente al form, que va a tener que recargarse (y perder los valores ya ingresados, muchos de los cuales pueden haber estado correctos).

Hoy en día hay técnicas. ajax es la más común, que te permiten combinar las dos validaciones en una. pero eso ya es otra cosa que escapa a esta explicación.


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.