Como hacer un formulario de contacto con PHP (II)

Publicada el 4.Mayo.2008 por Diego Ignacio en Codigo, JavaScript, Tutoriales


Como hacer un formulario de contacto con PHP (II)

La validación de campos en los formularios en general es extremadamente importante, muchas veces la información ingresada debe ser correcta o de lo contrario generará algún error en bases de datos, sistemas o simples funciones que hayamos creado.

Las posibilidades mas utilizadas y eficientes de validación para un formulario en Internet son el JavaScript y el PHP, pero la más importante es la que trabaja en PHP (o código en que hagamos el formulario), esto se debe a que JavaScript trabaja directamente con el usuario y este puede no tener JavaScript en su navegador o simplemente saltar la validación de manera maliciosa, a diferencia de PHP que no puede ser omitido gracias que es parte de un sistema interno que procesa los datos de la forma en que nosotros le indiquemos.

Pero entonces, ¿Por qué hacer la validación de JavaScript?

La ventaja del JavaScript es que al no ser un trabajo de lado del servidor la hace más rápida para el usuario y más liviana para nosotros en cuanto a procesos del servidor.

Validación por JavaScript

Lo primero que debemos considerar es que el código JavaScript se debe escribir entre <head> y </head>
De la siguiente forma:

HTML:
  1. <script type="text/javascript" language="javascript">
  2.     ... Aqui va tu codigo javaScript ...
  3. </script>

O bien puedes crear un “archivo.js” y escribir en él todo el código y adjuntarlo a tu HTML insertando entre <head> y </head> el siguiente código:

HTML:
  1. <script type="text/javascript" language="javascript" src="archivo.js"></script>

Donde se debe especificar en el parámetro “src” la dirección del “archivo.js” que contendrá nuestro código.

Quiero dejar en claro que no explicare a cabalidad la forma del código JavaScript, pero lo suficiente como para entender que se esta haciendo.

Empezando con la validación.

Como primera cosa que debemos comprender es que JavaScript tiene algunos parámetros reservados para ejecutar funciones en las etiquetas y algunos más específicos para los formularios.

Para comenzar es necesario asignarle a nuestro formulario una manera de controlar si será enviado o no, según sean evaluados los valores ingresados. Para esto debemos escribir un nuevo parámetro en la etiqueta <form> llamado “onsubmit” y entregarle como valor lo que nos regrese la función “validar()” que luego escribiremos en JavaScript:

HTML:
  1. <form id="contacto" name="contacto" method="post" action="resibe-datos.php" onsubmit="return validar(this);">

El parámetro “onsubmit” controla si el formulario será o no enviado después de precionar el boton “submit” dependiendo si el valor que se le envía es verdadero (true) o falso (false).

Por ejemplo si escribimos:

HTML:
  1. <form id="contacto" name="contacto" method="post" action="resibe-datos.php" onsubmit="return false;">

El formulario nunca se enviara, porque se ha especificado “false” como un valor fijo.

Pero si en cambio escribimos:

HTML:
  1. <form id="contacto" name="contacto" method="post" action="resibe-datos.php" onsubmit="return true;">

El formulario si se podrá enviar, aunque esto obviamente no sirve de mucho.

Por lo tanto con el código que definimos para nuestro formulario (onsubmit=”return validar(this);”), lo que estamos haciendo es que al presionar el botón de “enviar” se ejecute la función “validar()” a la que se le envía como parámetro “this” (éste) que en definitiva es nuestro formulario.

Escribiendo nuestro JavaScript

Lo primero que debemos hacer en nuestro código es definir la función “validar”, la que verá si los datos son correctos y devolverá un valor verdadero (true) o falso (false) en caso de que el formulario este correcto o no respectivamente.

JAVASCRIPT:
  1. function validar(formulario){
  2.  
  3. }

Luego que campos debemos validar y que es lo que deben contener para pasar la prueba de validación.

Los campos que queremos validar y que necesitan cierto formato son:

  1. Nombre:
    Es necesario, por lo tanto en el campo debe existir texto.
  2. E-mail:
    Es necesario, por lo tanto en el campo debe existir texto y además debe cumplir con un formato, por ejemplo si el campo tuviese “diego[arroba]soma-d.com” no seria valido, en cambio “diego@soma-d.com” si.
  3. Comentario:
    Es necesario, por lo tanto en el campo debe existir texto.

Como vimos a la función “validar()” es necesario enviarle un “this” para identificar el formulario a validar, y en la función propiamente tal el valor “this” es almacenado en la variable “formulario”.

Entonces para poder acceder al valore del campo “nombre” es suficiente con escribir:

JAVASCRIPT:
  1. formulario.nombre.value;

Esto se puede hacer gracias a que cuando diseñamos nuestro formulario en HTML le definimos una ID como “nombre”.

Para acceder a los demás campos se hace de la misma manera:

JAVASCRIPT:
  1. function validar(formulario){
  2.         formulario.nombre.value;
  3.         formulario.email.value;
  4.         formulario.comentario.value;
  5. }

Pero ¿Cómo sabemos si nuestros campos cumplen o no con las condiciones?

Para hacerlo, primero hay que verificar si los campos “necesarios” contienen caracteres usando la propiedad “length” de JavaScript que nos retornara “el largo” o cantidad de caracteres que tiene el “value”. Y si hay uno que no cumple con esto la función retornará un “false”, así que nuestra función queda de la siguiente manera:

JAVASCRIPT:
  1. function validar(formulario){
  2.     var esValido = true;
  3.        
  4.     if(formulario.nombre.value.length <= 0){
  5.         esValido = false;
  6.     }
  7.  
  8.     if(formulario.email.value.length <= 0){
  9.         esValido = false;
  10.     }
  11.    
  12.     if(formulario.comentario.value.length <= 0){
  13.         esValido = false;
  14.     }
  15.  
  16.     return esValido;
  17. }

Ahora bien, nuestra función pregunta si escribimos los datos necesario, pero...

¿Qué pasa si el mail está escrito, pero de una forma invalida?

Esto se soluciona aplicando expresiones regulares (las que no explicaré porque ya son un tema más largo) de la siguiente forma, dejando nuestro código de la siguiente manera:

JAVASCRIPT:
  1. function validar(formulario){
  2.  
  3.     var esValido = true;
  4.        
  5.     if(formulario.nombre.value.length <= 0){
  6.         esValido = false;
  7.     }
  8.        
  9.  
  10.     if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(formulario.email.value))){
  11.         esValido = false;
  12.     }
  13.  
  14.    
  15.     if(formulario.comentario.value.length <= 0){
  16.         esValido = false;
  17.     }
  18.     if(!esValido){
  19.         alert("El formulario contiene errores, por favor corríjalos.")
  20.     }
  21.     return esValido;
  22. }

La expresión regular “(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/” , básicamente lo que hace es preguntar si el mail ingresado encaja con un “patrón” que siguen todos los e-mails.

Por ejemplo: "diegosoma-d.com" no cumplirá con el patrón, a diferencia de “diego@soma-d.com”, la expresión “formulario.email.value.length <= 0” se omite debido que un campo vacío tampoco cumplirá con el patrón.

Con ese código nuestra validación por JavaScript estará completa y nuestro formulario estará listo para ser validado por JavaScript. Recuerda que si por razones de tiempo no puedes hacer una de las dos validaciones, debes omitir la de JavaScript por cuestiones de seguridad.

Tags: , , , , ,
- Fin -
Puedes comentar sobre esta entrada, o hacer un TrackBack desde tu sitio.

- 4 Comentarios para “Como hacer un formulario de contacto con PHP (II)” -

  1. victor Dice:
    13.Mayo.2008 a las 3:04 pm

    Que tal,
    cómo se podría validar un formulario que tenga una lista de opciones en donde si escoge la primera (seleccione una) indique que debe seleccionar una categoría?

    gracias, y muy buen contenido en el blog.

    Saludos desde Guatemala

  2. Diego Ignacio Dice:
    13.Mayo.2008 a las 5:08 pm

    Hola gracias por comentar.. :)

    Si la eleccion se hace con un “select” como este.

    <select name="categoria" id="categoria">
    <option value="-">seleccione una</option>
    <option value="1">categoria 1</option>
    <option value="2">categoria 2</option>
    </select>

    puedes agragar a la misma validacion que escribi arriba las siguientes lineas.

    if(formulario.categoria.value == “-”){
    esValido = false;
    alert(”Debes elegir una categoria.”);
    }

    con eso logras que se accese el “formulario” luego entre a la id “categoria” (que seria tu select) y lea el “valor” que esta selecionado al momento del envio. y si ese valor es el “-” que le asignaste como value a “seleccione una” no validará, y alertara al usuario.

    culquier duda solo preguntas :)

  3. victor Dice:
    13.Mayo.2008 a las 9:08 pm

    ok, gracias, ya lo agregué, solo que las comillas (“”) hay que cambiarlar a (”) y colocar un punto en $contenido .= “Nombre :

    if($valido){
    $contenido = “Nombre : “.$_POST[’nombre’].”\n”;
    $contenido .= “E-Mail : “.$_POST[’email’].”\n”;
    $contenido .= “Comentario : “.$_POST[’comentario’];

    Saludos

  4. Diego Ignacio Dice:
    20.Junio.2008 a las 10:15 am

    Una validacion captcha trabaja con PHP de fondo… ahora no la explique, porque este formulario es bastante simple… ahora pensando supongo que seria bueno publicar un tutorial de captcha, lo tendre presente

Deja tu comentario

Este sitio fue desarrollado por Soma-d sobre el sistema Wordpress
Estructurado bajo xHTML y CSS válidos
Reconocimientos : Webdesign Is Art + We Love Wp + CSS Clip + CMS Showcase + Boxed CSS + CSS Star Vivee