Posts Tagged ‘formulario’

JSValidate: Framework para validar formularios en javaScript

Jueves, Febrero 4th, 2010

Buscando formas de validar mis formularios (Ya que en PHP se me hacia algo tedioso de hacer) decidí buscar en distintos blogs de programación, pero cuando hice una búsqueda en particular en Google hubo una página que obtuvo mi atención, era la página oficial de un completo framework para validar los formularios.

JSValidate es el nombre del framework programado en JavaScript y que tiene muchas opciones para validar nuestros formularios.

Como usar JSValidate

Usar el framework es más sencillo de lo que parece y se usa como cualquier archivo JavaScript externo con la diferencia de que aquí usamos la propiedad class de las etiquetas para llamar la función del framework que necesitemos.

Primer paso: Debemos descargar el framework del sitio web oficial, luego lo descomprimimos en la carpeta de nuestro proyecto web o donde lo creamos conveniente.

Segundo paso: Llamamos los scripts externos de esta manera:

<script type="text/javascript" language="javascript" src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" language="javascript" src="scriptaculous/src/scriptaculous.js"></script>
<script type="text/javascript" language="javascript" src="jsvalidate.js"></script>

Tercer paso: Según en la etiqueta que queramos validar o campo llamamos la función dentro de la propiedad class de esta manera:

<input type="text" name="nombre" class="jsvalidate_number" />

Las distintas funciones del framework poseen distintos nombres que debes tener en cuenta para así según su función hacer uso de ellas. Algunas de sus funciones son:

  • jsrequired: El campo debe tener algún tipo de valor.
  • jsvalidate_number: Acepta decimales y negativos.
  • jsvalidate_digits: Acepta solo números.
  • jsvalidate_alpha: Solo letras.
  • jsvalidate_alphanum: Solo letras, números y subrayados.
  • jsvalidate_email: Cualquier dirección de correo valida.
  • jsvalidate_uscanzip: Código postal de E.U. o Canada.
  • jsvalidate_usstate: Cualquier estado de dos letras mayúsculas de los estados unidos.
  • jsvalidate_usphone: Acepta números de teléfono de los formatos más conocidos en E.U.
  • jsvalidate_creditcard: Valida VISA, MasterCard, American Express  formatos sin  espacios o guiones.

(más…)

Procesar un formulario en la misma página

Martes, Enero 26th, 2010

Muchas veces cuando creamos un formulario, hacemos referencia a un script externo que nos procesará la información y previamente la visualizará o mostrará un resultado. nosotros podemos procesar la información de ese formulario haciendo referencia a la misma página desde la etiqueta action y luego procesar toda la información para luego imprimirla en la misma página.

<?php

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

$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
if($nombre == ""){
$nombre = "No has escrito tu nombre";
}
else {
$nombre = "Tu nombre es ".$nombre;
}

if($apellido == ""){
$apellido = "No has escrito tu apellido";
}
else {
$apellido = "Tu apellido es ".$apellido;
}
}

?>
<html>
<head>
<title>Resultados en la misma página</title>
</head>
<body>
<form method="post" action="prueba.php">
<table>
<tr>
<td>Tu nombre</td>
<td> <input type="text" name="nombre" /> </td>
<td> <?php echo @$nombre; ?> </td>
</tr>
<tr>
<td>Tu apellido</td>
<td><input type="text" name="apellido" /></td>
<td><?php echo @$apellido; ?></td>
</tr>
<tr>
<td><input type="Submit" value="Mostrar datos" name="enviar" /></td>
</tr>
</table>
</form>
</body>
</html>

Como podemos observar en el formulario hicimos referencia a la misma página a través de la etiqueta action colocando el mismo nombre del archivo:

<form method="post" action="prueba.php">

Luego al principio de la página añadimos el código que nos dice si se declara o activa “enviar” que es el name del botón submit, este activará el código PHP para procesar el formulario.

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

Luego recogemos todo los datos que nos proporciona el formulario declarando las debidas variables y luego empezamos con los condicionales sí la variable $nombre esta vacía (es igual o igual a ” “), entonces significa que esta vacía y tendrá un nuevo valor que dice “No has escrito tu nombre”.

$nombre = $_POST['nombre'];
    $apellido = $_POST['apellido'];
    if($nombre == ""){
        $nombre = "No has escrito tu nombre";
    }
    else {
        $nombre = "Tu nombre es ".$nombre;
    }

De lo contrario se se escribió algo la variable toma el valor de $nombre = “Tu nombre es “.$nombre, así mismo. Ahora lo que necesitamos es mostrar ese valor en frente de las cajas de texto, así que ponemos un nuevo código en PHP de esta forma:

<td>Tu nombre</td>
        <td><input type="text" name="nombre" /></td>
        <td><?php echo @$nombre; ?></td>

Le damos un echo a la variable nombre que dependiendo de su valor dirá si esta vacía o si ya tiene datos, el @ es para no mostrar un error que muestra en los resultados si la variable aún no se declara, intenten dar ese echo sin el arroba a ver que pasa, luego añadanlo y verán el resultado.

Tomar valor de un formulario y mostrarlo

Domingo, Enero 24th, 2010

Hace unos días mi amigo @julianarmando me preguntaba como capturar los valores de un formulario y luego mostrarlos. Pues esto es bastante sencillo de hacer en PHP, así que primero diseñamos el formulario, y hacemos algo como esto de ejemplo:

<html>
<head>
</head>
<body>
<form method="post" action="enviar.php">
<table>
<tr>
<td><input type="text" name="nombre" /></td>
<td><input type="submit" value="enviar"/></td>
</tr>
</table>
</body>
</html>

Recuerden poner la “propiedad name” de los elementos ya que por medio de esta es como se recogen los valores del formulario. Además en la etiqueta form, ponen el nombre del archivo que procesará los datos, en este caso enviar.php.

Ahora veamos en archivo enviar.php, que es verdaderamente fácil:

<?php
$nombre = $_POST['nombre'];
echo "Tales recogido".$nombre;
?>

Con la variable global $_POST[''] recogemos el valor de un formulario específico, en este caso del componente nombre y en seguida el archivo procesa esta información y la muestra por pantalla.