Como utilizar el JQuery validator


Cuando estamos a mitad del desarrollo de nuestro sistema, e hicimos las validaciones correspondientes al mismo, del lado del servidor, es frecuente recurrir a JQuery para una validación del lado del usuario, es decir, la validación necesaria para que evalue inmediatamente cada campo llenado por el usario y al momento que el usuario dé clic y envie los datos no tenga que hacer el recorrido hacia las validaciones de lado del servidor , sinó que el plugin JQuery Validator se encargue de hacer las validaciones de lado del cliente.

Se requiere una biblioteca estándar de métodos de validación (pensar en mensajes de correo electrónico, direcciones URL, números de tarjeta de crédito). Es necesario colocar mensajes de error en el DOM y mostrar y ocultar cuando proceda. Es posible que tenga formas diferentes para especificar reglas de validación, basado en el entorno de servidor que está utilizando en diferentes proyectos. Y después de todo, no quieren reinventar la rueda, ¿verdad?

Para ello ocupamos simplemente 4 cosas:

Nota1: El tipo de estructura que uso es "Model View Controller", hago la aclaración para un mejor entendimiento.

1.-Primero incluyo la clase donde tengo JQuery Validator:

include_once('class.modJQueryTools.php');


2.-La instancia:
$JQueryTools3 = new modJQueryTools(array('path'=>'lib/jquery132'));


3.-La base de JQuery o mejor dicho la ubicación del script:
function jsJQueryBase(){


        
$text = <<
path/jquery-1.3.2.min.js">
path/$this->theme/jquery-ui.css" />   
path/$this->theme/jquery-ui.min.js">
 
ENDH;
 return $text;
 }

 

4.-Y en este caso la llamada de la función:

echo $JQueryTools3->jsJQueryValidate();


La función en este caso JQuery Validator con los ID similares a la Forma1
Entonces la función quedaría de este modo:

function disDetalleValidator(){
 $(document).ready(function() {
 $("#form1").validate({
 rules: {
 id_producto: "required",// simple rule, converted to {required:true}
 
 descripcion: {
 required: true
 },
 costo: {
 required: true
 },
 periodo: {
 required: true
 },
 fechaInicio: { 
 required: true
 },
 fechaFin: { 
 required: true
 },
 },
 errorLabelContainer: "#warning",

 messages: {
 email: "* Un e-mail valido es requerido",
 id_producto: "* El id del producto es requerido",
 phone: "* El Telefono es requerido",
 date: "* Escriba una fecha correcta"
 }
 });
 });
 
 
 * { font-family: Verdana; font-size: 11px; line-height: 14px; }
 .submit { margin-left: 125px; margin-top: 10px;}
 .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
 .form-row { padding: 5px 0; clear: both; width: 700px; }
 label.error { width: 250px; display: block; float: right; color: red; padding-left: 120px; }
 input[type=text], textarea { width: 250px; float: left; }
 textarea { height: 50px; }

 #warning { 
 margin:0px; 
 padding:0px; 
 width: 100px;
 } 
 #warning { 
 display:none; 
 }             
 
 


 function disFormaDetalle($frmVars){
 if(is_array($_REQUEST)) extract($_REQUEST);
 if(is_array($frmVars)) extract($frmVars);
 //print_r($frmVars);
 
 $periodoSelected[$periodo] = 'selected';
 foreach($catPeriodo as $periodo=>$description){
 $periodoStr.="$description\n";
 }
 $html = <<
<form id="form1" method="post">
 <input name="id_svc" type="hidden" value="$id_svc" />
 
 Id Producto: <input id="id_producto" name="id_producto" type="int" value="$id_producto" />
 

 

 Descripcion: <input name="descripcion" type="var" />
 

 

 Costo: <input name="costo" type="float" />
 

 

 Periodo:<select name="periodo"> </select>
 

 

 FechaInicio:<input id="from" name="fechaInicio" type="date" />
 

 

 FechaFin:<input id="to" name="fechaFin" type="date" />
 

 

 <input type="submit" value="$boton" /> 
 

 </form>

 

Encuesta de Hoy

Qué gadget te gustaria tener?

Acerca de: MG

Es un proyecto sobre un sitio web, donde los usuarios podrán leer noticias y artículos de relevancia sobre todo lo que envuelve a la Tecnología; Escritos por profesionales en los ramos de Diseño Web, Programacion Web, TI, etc.

Leer más...

MundoGeek

Comentarios y Sugerencias por favor a: contactoarroba_1mundogeek.com, Gracias por tu preferencia.

Login Form