Zebra Form

Zebra_Form es una librería PHP que simplifica el proceso de creación y validación de formularios HTML. Su estructura orientada a objetos promueve un rápido desarrollo de formularios HTML y además te permite validarlos.

2

Características:

  • Proporciona protección contra cross-site scripting (XSS)
  • Evita el Spam
  • Validación del lado del servidor y cliente
  • Tiene un montón de reglas predefinidas y además puedes crear tus reglas personalizadas
  • Soporte en todos los principales navegadores, como Firefox, Chrome, Opera, Safari e Internet Explorer 6 +
  • Diseño valido para HTML 4.01 Strict, XHTML 1.0 Strict o HTML5
  • Tiene una amplia documentación

Sitio web.

 

Instalación:

<html>

    <head>

        <title>Zebra_Form Example</title>

        <meta charset="utf-8">

        <!-- load Zebra_Form's stylesheet file -->
        <link rel="stylesheet" href="path/to/zebra_form.css">

        <!-- load jQuery -->
        <script src="path/to/jquery.js"></script>

        <!-- load Zebra_Form's JavaScript file -->
        <script src="path/to/zebra_form.js"></script>

    </head>

    <body>

    <!-- the PHP code below goes here -->

    </body>

</html>
// Llamamos a la librería
require_once BASEPATH . 'library/zebra_form/Zebra_Form.php';
// Creamos el formulario: Nombre del formulario, , METHOD y ACTION
$form = new Zebra_Form('formregister', 'post', 'usuario.php');

// Creamos los campos
// 1.- jemplo de un campo texto
 //Label para el Nombre
    $form->add('label', 'label_nombre', 'nombre', 'Nombre Completo:');
    // Imput para el Nombre
    $obj = & $form->add('text', 'nombre', '', array('autocomplete' => 'off'));
    // validaciones para el nombre en ejemplo se especifica que el campo es requerido y que san solo letras.
// Como se muestra en el ejemplo se pueden escribir los mensajes personalizados
    $obj->set_rule(array(
        'required' => array('error', 'Ingrese el nombre completo'),
        'alphabet' => array(' ', 'error', 'Solo se permiten letras')
    ));
// 2.- ejemplo de un campo email
//Label para el Email
    $form->add('label', 'label_email', 'email', 'Correo:');
    // Input para el Email
    $obj = & $form->add('text', 'email');
    // validaciones para el Email
    $obj->set_rule(array(
        'required' => array('error', 'Ingrese el correo'),
        'email' => array('error', 'Ingrese un correo Valido')
    ));
//3.- ejemplo de un campo contraseña
//Label para el Password
    $form->add('label', 'label_password', 'password', 'Contraseña:');
    // Input para el Password
    $obj = & $form->add('password', 'password');
    // validaciones para el password
    $obj->set_rule(array(
        'required' => array('error', 'Ingrese la contraseña'),
        'length' => array(6, 20, 'error', 'El minimo de caracteres es de seis')
    ));
// se valida que en el campo la contraseña sea igaul al campo anterior
    //Label para el password repeat
    $form->add('label', 'label_passwordtwo', 'passwordtwo', 'Repetir contraseña:');
    // Input para el password repeat
    $obj = & $form->add('password', 'passwordtwo');
    // validaciones password repeat
    $obj->set_rule(array(
        'required' => array('error', 'Escriba nuevamente la contraseña'),
        'compare' => array('password', 'error', 'Las contraseñas no coinciden')
    ));
// 4.- Combox
 $form->add('label', 'label_departmento', 'departmento', 'Departamento:');
    $obj = $form->add('select', 'departmento', '', array('other' => true));
    $obj->add_options(array(
        'Marketing',
        'Operations',
        'Customer Service',
        'Human Resources',
        'Sales Department',
        'Accounting Department',
        'Legal Department',
    ));
    $obj->set_rule(array(
        'required' => array('error', 'El departamento es requerido!')
    ));
// 5.- Capcha
 // Captcha

    $form->add('captcha', 'captcha_image', 'captcha_code');
    $form->add('label', 'label_captcha_code', 'captcha_code', 'Digita el Codigo');
    $obj = & $form->add('text', 'captcha_code', '', array('autocomplete' => 'off'));
    $form->add('note', 'note_captcha', 'captcha_code', 'Digite solo las letras de color negro', array('style' => 'width: 200px'));
    $obj->set_rule(array(
        'captcha' => array('error', 'Los caracteres no coinciden!')
    ));
// 6.- Calendario
 // "date"
    $form->add('label', 'label_date', 'date', 'Fecha de inscripción');
    $date = $form->add('date', 'date');
    $date->set_rule(array(
        'required'      =>  array('error', 'Fecha requerida!'),
        'date'          =>  array('error', 'Fecha invalida!'),
    ));

//Boton para enviar el formulario
    $form->add('submit', 'guardar', 'Guardar');

    // validación que cumpla todos las reglas creadas en el formulario,
// si el formulario esta correcto lo envía, sino muestra nuevamente el mismo.
    if ($form->validate()) {

    }
    else
        $form->render('*vertical');
    ?>

Los ejemplo y documentación los encuentras en:
http://stefangabos.ro/wp-content/demos/Zebra_Form/

15 comentarios en “Zebra Form”

  1. freddy dice:

    estimado, como podría validar para que después de validar el formulario y hacer el submit el botón de enviar se desactive?. lo que pasa es que el formulario se queda cargando porque envía correos y almacena la info, y tengo casos en el que el usuario hace clic más de 2 veces y por ende se crean registros innecesarios. muchas gracias por su ayuda! Ss.

    1. denker dice:

      Hola freddy, en el evento submit puedes deshabilitar el boton para que no te de problemas, seria algo como esto


      $( "#formulario" ).submit(function() {
      $("#boton").attr('disabled',true);
      });

  2. freddy dice:

    chanfle…. muchas gracias por la ayuda, pero yo no conozco mucho de javascript… intenté escribiendo dentro del head lo siguiente:

    $( “form” ).submit(function() {
    $(“submit”).attr(‘disabled’,true);
    });

    pero no dio resultado, será porque no he puesto bien los nombres?, yo declaré mi formulario y mi botón de la siguiente manera:
    $form = new Zebra_Form(‘form’,’post’,’reg.php’);
    $form->add(‘submit’, ‘btnsubmit’, ‘Enviar’);

    Muchas gracias poro tu yuda denker!

    1. denker dice:

      el código tienes que colocarlo dentro de la etiqueta head, y funciona con jquery por lo tanto debes también poner document.ready el código completo podría quedar así:

      $(document).ready(function(){
      $( “#frmAlgo” ).submit(function() {
      $(#submitAlgo).attr(‘disabled’,true);
      });
      });

      Es importante el signo # porque es el selector de id, de esta forma sabe sobre que etiqueta va a trabajar, primero seleccionando el formulario con el atributo id frmAlgo y después con el elemento con id submitAlgo que es el que se encargaría de mandar el formulario.

      Necesitas agregar el atributo id a esos dos elementos, lo puedes hacer con el cuarto parámetro al momento de crear tu formulario y agregar el botón, podría quedar asi:

      $form = new Zebra_Form(‘form’,’post’,’reg.php’, array(‘id’ => ‘frmAlgo’));
      $form->add(‘submit’, ‘btnsubmit’, ‘Enviar’,array(‘id’ => ‘submitAlgo’));

  3. badboy dice:

    Hola

    Estoy con esta librería y no consigo ponerla en marcha, en local todo funciona muy bien pero en el host no funciona nada, no se imprime ni siquiera el formulario.

    pueden ayudarme??

    gracias

    1. denker dice:

      Te marca algun error o algo?

      1. badboy dice:

        Hola.
        Gracias por contestar. No me marca ningun error. Es mas no sale nada de nada. La web es http://www.sarrionfitness.com/casa.php

      2. badboy dice:

        Hola

        No me marca ningun error. La cuestion es que en local todo funciona pero en el host no me imprime ni el formulario.

        la web es http://www.sarrionfitness.com/casa.php. Aqui es donde estoy intentando que funcione. esta alojada en STRATO y compartido.

        Gracias

        1. denker dice:

          Ya revisaste el archivo log de tu servidor

  4. gustavo dice:

    me podrias ayudar con el codigo de la libreria zebra, que no me sale
    no me mandan por favor el archivo todo completo con las librerias, porque
    cambio el path/to/jquery.js y no me sale por fi

  5. Pablo Alba dice:

    Denker, un excelente trabajo.
    Hace poco que estoy trabajando con esta librería y me estoy saliendo con facilidad y sobre todo con ejemplos como el tuyo.
    Como no podía ser de otra forma te tengo que hacer una pregunta y si puedes contestar te lo agradecería.
    Pregunta: Si bien he repasado el código, no consigo que me funcione el “Captcha”, se ha de poner en algún lugar las “public key” y las “private key” para identificarlo?
    Gracias anticipadas

    1. denker dice:

      Hola Pablo, la librería no trabaja con recaptcha y no requiere public y privare ley, puedes revisar la documentación desde este lino http://stefangabos.ro/wp-content/docs/Zebra_Form/Controls/Zebra_Form_Captcha.html. saludos

  6. Nicolai dice:

    Como hago que todo lo descrito funciones con IE7.
    Muchas gracias por su respuesta

    1. sun2012 dice:

      Hola, si no se te muestra bien los elementos gráficos puedes usar http://modernizr.com/ o normalize.css http://necolas.github.io/normalize.css/ o que parte no funciona coreectamente.

      De hecho es soportado desde ie6 en la documentación oficial lo dice http://stefangabos.ro/php-libraries/zebra-form/

  7. Nicolai dice:

    Muchas gracias por tu apoyo
    Zebra tiene validaciones para los campos de los formularios
    cuando no se cumple con la validacion muestra mensajes de error
    estos mensajes de error tienen un simbolo para “x” en la parte derecha superior para cerrarlos en IE6 no se vizualiza el usuairo no sabe que hacer, alguna forma de solucionarlo o ponerle tiempo? para que desaparescan?
    desde IE6 o IE7

    Muchas gracias

Deja un comentario