jQuery Validate

jQuery Validate

Presentacion:

En mas de una ocacion por no decir siempre, se presenta la necesidad de validar los formularios, para esta validacion existe un Pluguin para jquery el cual se llama Validate.

Opciones del pluguin:

rules: Define las reglas de validacion, las opciones que he usado son required, minlength, email.

messages: Se configura el contenido de los mesajes cuando las validaciones no dan un resultado positivo.

submitHandler: Define las acciones que se usan en caso de que todas las validaciones sean correctas

invalidHandler: Define las acciones que se usan en caso de que las validaciones sean incorrectas.

Inclucion de archivos necesarios:

Para inciar el uso es necesario comprender sus origenes, validate es un pluguin de Jquery, razon por la cual debe hacer llamado a jquery, una vez realizado la inclusion del framework jQuery, debe realizar  el llamado del validate asi:

<script type=”text/JavaScript” src=”jquery.js”></script> <script type=”text/JavaScript” src=”query.validate-v1.5.5.js”></script>

Definicion de reglas y acciones:

Despues de incluir las respectivas librerias es necesario definir las acciones que tendra jQuery como se muestran a contnuacion:

<script type=”text/javascript”> $(document).ready(function() { $(“#parametrosEnvio”).validate({ rules: { emailDestino: { required: true, email: true, minlength: 10 } }, messages: { emailDestino: { required: “Ingrese una direccion de email valida”, email: “La direccion de email ingresada no tiene un formato valido”, minlength: “El email debe tener minimo 10 caracteres” }, }, submitHandler: function(form){ $(“#destino”).show(); $(“#destino”).html(“<img src=’img/ajax-loader.gif’ /></img><strong>Cargando resumen de membresia…</strong>”); $.ajax({ type: “POST”, url:”include/welcome_media_kit.php”, contentType: “application/x-www-form-urlencoded”, processData: true, data: “nombre=”+escape($(‘#nombreDestino’).val())+”&email=”+escape($(‘#emailDestino’).val())+”&idioma=”+escape($(‘#idioma’).val()), success: function(html){ $(“#enviarEmail”).show(); $(“#destino”).html(“”); $(“#destino”).append(html); } }); }, invalidHandler: function(form) { $(“#enviarEmail”).hide(); $(“#destino”).html(“”); $(“#destino”).hide(); }, }); }); </script>

Advertisement