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>
0 comentarios:
Publicar un comentario