Dos Ideas. - Contribuciones del usuario [es]

JQuery Validation

2011-05-05T18:30:27Z

Pjnovas: /* Ver también */

[[JQuery Validation]] es un plugin para la librería [[JavaScript]] [[JQuery]] que agrega diversa funcionalidad para la validación de formularios.

==Como utilizarlo bajo clases CSS==

Primero hay que registrar la libreria de jquery y luego la del plugin en el head:

<code html4strict>
<head>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
</head>
</code>

Luego lo que necesitariamos es un formulario a validar, pero a cada elemento del formulario le asignamos una clase CSS para identificar el tipo de validacion que va a necesitar cada control:

<code html4strict>
<form id="frmSuscripcion" method="post" action="AlgunaAccion.php">
<fieldset>
<legend>Ingrese su nombre, email, url y fecha de nacimiento</legend>
<p>
<label for="cNombre">Name (requerido)</label>
<input id="cNombre" class="required" />
</p>
<p>
<label for="cEmail">E-Mail (requerido)</label>
<input id="cEmail" class="required email" />
</p>
<p>
<label for="cUrl">URL (opcional)</label>
<input id="cUrl" class="url" />
</p>
<p>
<label for="cFechaNac">Fecha Nac. (requerido)</label>
<input id="cFechaNac" class="required date" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</code>

En este caso le asigne la class "required" a los que son requeridos y algunas ya pre establecidas por el plugin como por ejemplo el "email", "url" y "date" para que los valide como tales.

Lo unico que nos quedaria es implementar el plugin para que valide a traves de esas clases css.
Por lo que en nuestro head agregamos lo siguiente:

<code javascript>
[...]

<script type="text/javascript">

//Evento que se dispara cuando el DOM esta listo para ser utilizado
$(document).ready(function() {

//Seteo los CSS Class en el validador para que actuen segun su validacion
$.validator.addClassRules({
'required': {
required: true
},
'date': {
date: true
},
'email': {
email: true
},
'url': {
url: true
}
});

//Extiendo por jQuery los mensajes del plugin validador
//(sobre-escribo los ya existentes)
$.extend($.validator.messages, {
required: "Campo requerido",
date: "Fecha no valida",
email: "E-mail incorrecto",
url: "URL incorrecta"
});

// Inicio el plugin
$("#frmSuscripcion").validate();

});
</script>

</head>
</code>

De esta forma el plugin por si solo validara los controles dependiendo de las clases CSS que tenga asignadas.

==Ver también==
* [[JQuery]]
* [http://docs.jquery.com/Plugins/validation Web Oficial de jQuery Validate]

[[Category:JQuery]]

JQuery

2011-05-05T18:12:42Z

Pjnovas: /* Plugins */

[[Category:JQuery]]
[[JQuery]] es un nuevo tipo de librerías de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos,desarrollar animaciones, y agregar interacción con la tecnología [[AJAX]] a nuestras páginas web.

==Ejemplo==
La wikipedia y la propia página de [[JQuery]] tienen varios ejemplos de uso.

==Plugins==
Toda la funcionalidad de [[JQuery]] se puede extender mediante el uso de plugins. Hay una enorme cantidad de plugins disponibles, que realizan variadas tareas.

* [[JQuery Autocomplete]]: permite ir completando el texto faltante a medida que el usuario va escribiendo
* [[JQuery Cascade]]: ante un evento permite generar una respuesta en cascada, buscando los datos con ajax
* [[JQuery Datepicker]]: permite desplegar un calendario en un campo del formulario
* [[JQuery Form]]: manipulación de formularios, para convertirlos al estilo ajax
* [[JQuery Validation]]: plugin de jquery para la validacion de formularios

==Javascript llamada asincronica==

Esta funcion tiene cierto comportamiento a partir del response de la url donde estamos ejecutando. Se obtiene el resultado (success) y se ejecuta la funcion del handleResponse.

Para hacer uso del HTML devuelto, podemos implementar un controlador (success). En el siguiente ejemplo puede verse como se espera la respuesta de la url que queremos para poder realizar una funcion determinada a partir de dicha respuesta. (sin que tire error de javascript)

function procesar(id){
$.ajax({
type: "POST",
url: miServlet,
processData: false,
success: handleResponse
});
}

function handleResponse(data, textStatus, XMLHttpRequest){
// funcion a ejecutar al esperar la respuesta de la url ejecutada.
}

success se llama si la petición tiene éxito. Se pasa los datos devueltos, un string que contiene el código de éxito, y el objeto XMLHttpRequest.

Pueden ver mas documentacion de estas [http://api.jquery.com/jQuery.ajax/ "Callback Functions"] en jquery.

==Ver también==
* [http://jquery.com/ Web oficial de jQuery]
* [http://docs.jquery.com/Using_jQuery_with_Other_Libraries Using jQuery with other libraries]
* [http://remysharp.com/jquery-api/ API de JQuery Online]
* [http://jquery.bassistance.de/api-browser/plugins.html API Browser de JQuery Online]
* [http://es.wikipedia.org/wiki/JQuery jQuery en la Wikipedia]
* [http://www.dosideas.com/descargas/category/1-jquery.html?download=42%3Aintroduccin-a-jquery-presentacin Presentación: Introducción a jQuery]

JQuery

2011-04-28T18:18:31Z

Pjnovas: Se agrega link a ppt: Introduccion a jQuery en "Vea Tambien"

[[Category:JQuery]]
[[JQuery]] es un nuevo tipo de librerías de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos,desarrollar animaciones, y agregar interacción con la tecnología [[AJAX]] a nuestras páginas web.

==Ejemplo==
La wikipedia y la propia página de [[JQuery]] tienen varios ejemplos de uso.

==Plugins==
Toda la funcionalidad de [[JQuery]] se puede extender mediante el uso de plugins. Hay una enorme cantidad de plugins disponibles, que realizan variadas tareas.

* [[JQuery Autocomplete]]: permite ir completando el texto faltante a medida que el usuario va escribiendo
* [[JQuery Cascade]]: ante un evento permite generar una respuesta en cascada, buscando los datos con ajax
* [[JQuery Datepicker]]: permite desplegar un calendario en un campo del formulario
* [[JQuery Form]]: manipulación de formularios, para convertirlos al estilo ajax

==Javascript llamada asincronica==

Esta funcion tiene cierto comportamiento a partir del response de la url donde estamos ejecutando. Se obtiene el resultado (success) y se ejecuta la funcion del handleResponse.

Para hacer uso del HTML devuelto, podemos implementar un controlador (success). En el siguiente ejemplo puede verse como se espera la respuesta de la url que queremos para poder realizar una funcion determinada a partir de dicha respuesta. (sin que tire error de javascript)

function procesar(id){
$.ajax({
type: "POST",
url: miServlet,
processData: false,
success: handleResponse
});
}

function handleResponse(data, textStatus, XMLHttpRequest){
// funcion a ejecutar al esperar la respuesta de la url ejecutada.
}

success se llama si la petición tiene éxito. Se pasa los datos devueltos, un string que contiene el código de éxito, y el objeto XMLHttpRequest.

Pueden ver mas documentacion de estas [http://api.jquery.com/jQuery.ajax/ "Callback Functions"] en jquery.

==Ver también==
* [http://jquery.com/ Web oficial de jQuery]
* [http://docs.jquery.com/Using_jQuery_with_Other_Libraries Using jQuery with other libraries]
* [http://remysharp.com/jquery-api/ API de JQuery Online]
* [http://jquery.bassistance.de/api-browser/plugins.html API Browser de JQuery Online]
* [http://es.wikipedia.org/wiki/JQuery jQuery en la Wikipedia]
* [http://www.dosideas.com/descargas/category/1-jquery.html?download=42%3Aintroduccin-a-jquery-presentacin Presentación: Introducción a jQuery]