22
Oct
09

Validaciones con Mootools.Floor

Desarrollando un proyecto web tenia que realizar las tipicas validaciones de los campos de los formularios y ya que estoy trabajando con el framework mootools tenemos una clase Form.Validator que es bastante sencilla de utilizar, pero para hacer algo mas llamativo encontre una clase que nos puede facilicar y muy facil de comprender Mootools.Floor aunque en muchos blogs encontre informacion sobre ello, siempre colocaban los mismos ejemplos de la pagina que es algo dificil de comprender si no estas familiarizado con Mootools,en esta entrada les voy a poner un ejemplo que solo tiene que copiar y pegar y claro leer la documentación de esta clase para configurar lo a su manera, pero este corre a la perfección.

mootools

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Documento sin título</title>
<script language=”javascript” type=”text/javascript” src=”core.js”></script>
<script language=”javascript” type=”text/javascript” src=”more.js”></script>
<link rel=”stylesheet” type=”text/css” href=”theme/blue/formcheck.css” media=”screen” />
<script language=”javascript” type=”text/javascript” src=”lang/es.js”></script>
<script language=”javascript” type=”text/javascript” src=”formcheck.js”></script>

<script type=”text/javascript”>
window.addEvent(‘domready’, function(){
postcomment = new FormCheck(‘formular’, {
display : {
errorsLocation : 1,
indicateErrors : 2,
keepFocusOnError : 1,
closeTipsButton : 0,
showErrors : 1
}
})
});
</script>
</head>

<body>
<form class=”formular” id=”formular” method=”post” action=”#”>
<br />
<br />
<input type=”text” class=”validate[‘required’,’alpha’]” />
<input type=”submit” value=”Hola” />
</form>
</body>
</html>

——————————————

Diran que es algo largo pero prefiero ponerlo así porque en todos lados sale solo trozos de código que aveces no funciona solo tiene que descargar las librerías y poner andar este ejemplo y modificar lo a su gusto.


Anuncios

3 Responses to “Validaciones con Mootools.Floor”


  1. 1 gerardo
    07/03/2010 en 10:20 PM

    Hola ya lo estoy probando pero como haria para usar las funciones onsubmit

    Optional
    submit If you turn this option to false, the FormCheck will only perform a validation, without submitting the form, even on success. You can use validateSuccess event to execute some code.
    submitByAjax you can set this to true if you want to submit your form with ajax. You should use provided events to handle the ajax request (see below). By default it is false.
    ajaxResponseDiv id of element to inject ajax response into (can also use onAjaxSuccess). By default it is false.
    ajaxEvalScripts use evalScripts in the Request response. Can be true or false, by default it is false.
    onAjaxRequest Function to fire when the Request event starts.
    onAjaxSuccess Function to fire when the Request receives . Args: response [the request response] – see Mootools docs for Request.onSuccess.
    onAjaxFailure Function to fire if the Request fails.
    onSubmit Function to fire when form is submited (so before validation)
    onValidateSuccess Function to fire when validation pass (you should prevent form submission with option submit:false to use this)
    onValidateFailure Function to fire when validation fails
    tipsClass The class to apply to tipboxes’ errors. By default it is ‘fc-tbx’.
    errorClass The class to apply to alertbox (not tips). By default it is ‘fc-error’.
    fieldErrorClass The class to apply to fields with errors, except for radios. You should also turn on options.addClassErrorToField. By default it is ‘fc-field-error’
    trimValue If set to true, strip whitespace (or other characters) from the beginning and end of values. By default it is false.
    validateDisabled If set to true, disabled input will be validated too, otherwise not.

  2. 3 anonimo
    10/03/2010 en 2:18 PM

    Gracias!!!

    Llevo toda la tarde rompiendome la cabeza porque los codigos de la pagina oficial no me funcionaban.


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


Datos Personales

Daniel Antonini Chavier, Soy Estudiante de la Universidad Centro-Occidental Lisandro Alvarado (Venezuela). Aficionado a la investigación de nuevas tecnologías de desarrollo.

Posts Más Vistos

Categorias

Estadisticas

  • 16,050 hits

A %d blogueros les gusta esto: