domingo, 1 de mayo de 2016

WordPress: ¿Cómo crear un formulario personalizado? - Parte 2 (Validación)

En esta segunda parte (ver parte 1) veremos cómo agregar validaciones de campos utilizando jQuery.

Paso 1

Agregamos la referencia a jQuery Validator: https://jqueryvalidation.org/

Para ello agregamos este código en funtions.php:

function add_jQuery_Validation() {
     wp_register_script('jquery-validation-plugin', 'http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js', array('jquery'));
    wp_enqueue_script('jquery-validation-plugin');
}  
add_action('wp_enqueue_scripts', "add_jQuery_Validation");


Paso 2

Creamos el formulario con los campos usando la función esc_attr:


El formulario se inserta luego de the_content. Esto puede variar según el tema:

<?php the_content(); ?>
  
  
  <form id="nueva_autorizacion" action="<?php the_permalink(); ?>" method="post">
    
    <p>Razón Social: <input type="text" name="razonsocial" value="<?php echo esc_attr($_POST['razonsocial']); ?>" /></p><br/>
    <p>Correo electrónico: <input type="text" name="email" value="<?php echo esc_attr($_POST['email']); ?>"/></p><br/>
      
    <p><input type="submit" value="Solicitar autorización"></p>
    
  </form>

    

Paso 3

Agregamos en la misma página el script de validación:

<script type="text/javascript">
  
(function($){

    $('#nueva_autorizacion').validate({
        rules: {
            'razonsocial': {
                required: true
            },
            'email': {
                required: true,
email: true
            }
        },

        messages: {
            'razonsocial': " Campo requerido.",
            'email': " Correo electrónico no válido."
        }
    });
  
})(jQuery);
      
</script>



Ir a Parte 3.

0 comentarios:

Publicar un comentario en la entrada