mootools: formcheck no da señales de vida

manuel2788 · #1 (**permalink**) 30/05/2011, 10:07

Buenos días,

Les escribo ya que estoy iniciándome en javascript, más precisamente con el framework mootools. No encuentro documentación clara, por ello presento mi problema a continuación:

Resulta que estoy intentando utilizar la clase formcheck de mootools, leo y sigo detenidamente la documentación que se encuentra en su página pero el script no da señales de estar vivo.

Primeramente llamo a las librerias de mootools, de la siguiente manera:

Código:

	<script src="js/mootools-core-1.3.2.js" type="text/javascript"></script>
	<script src="js/mootools-more-1.3.2.js" type="text/javascript"></script>

Luego, tal cual como dice la documentación. Llamo primeramente al css a utilizar en el formcheck, seguidamente el lenguaje a utilizar y por último el js del formcheck:

Código:

<link media="screen" type="text/css" href="js/formcheck/theme/classic/formcheck.css" rel="stylesheet" />
	<script src="js/formcheck/lang/es.js" type="text/javascript"></script>
	<script src="js/formcheck/formcheck.js" type="text/javascript"></script>

Inicio la instancia del formcheck con la clase determinada anteriormente para el formulario en cuestión:

Código:

	<script type="text/javascript">
    window.addEvent('domready', function(){
        new FormCheck('formregistro');
    });
	</script>

Por último, agrego al elemento input que deseo reaccione con la clase js. Le agrego la clase

Código:

class="validate['required']"

o cualquier otra, dependiendo de la acción que deseo se realice. Pero al correr la prueba, el formulario no muestra ninguna reacción al framework.

Será que podrán orientarme un poco? estoy bastante perdido con este framework.

Saludos y gracias de antemano.

masterpuppet · #2 (**permalink**) 30/05/2011, 10:14

Que tal manuel2788,

La versión que estas utilizando de FormCheck es compatible con Mootools 1.3 ?, no te muestra ningún error Firebug ?

manuel2788 · #3 (**permalink**) 30/05/2011, 10:38

Hola, masterpuppet, gracias por responder.

No, firebug no arroja ningún error y tienes razón; en la documentación de FormCheck dice que es para la versión 1.2. Entonces, descargue dicha versión pero el problema persiste.

masterpuppet · #4 (**permalink**) 30/05/2011, 10:46

Parece estar todo en orden, no puedes montar algún demo para verlo en vivo ? y hace el submit aunque no deba ?

manuel2788 · #5 (**permalink**) 30/05/2011, 11:06

Lo que pasa es que las pruebas las estoy haciendo en un servidor local y no tengo manera de montarlo.

A continuación dejaré un fragmento del código:

[CODE]<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset="utf8_spanish_ci" />

<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/mootools-1.2.5.1-more.js" type="text/javascript"></script>
<script src="js/mootools-1.2.5-core.js" type="text/javascript"></script>

<link media="screen" type="text/css" href="js/formcheck/theme/classic/formcheck.css" rel="stylesheet" />
<script src="js/formcheck/lang/es.js" type="text/javascript"></script>
<script src="js/formcheck/formcheck.js" type="text/javascript"></script>

<script type="text/javascript">
window.addEvent('domready', function (){
var check = new FormCheck('form1', {

display : {
fadeDuration : 500,
errorsLocation : 1,
indicateErrors : 1,
showErrors : 1
}
})
});
</script>

</head>

<body>
<form id="formregistro" method="post">
<label>Nombre:</label><input type="text" class="validate['required']" name="nombre" maxlength="20"/>
<label>Apellido:</label><input type="text" name="apellido" maxlength="20"/>
<label>Username:</label><input type="text" name="usuario" maxlength="20" class="validate['required','alphanum']" />
<input type="submit" name="submit" value="Enviar" size="5" class="botonregistro" />
<input type="reset" name="reset" value="Borrar" size="5" class="botonregistro" />
</form>
</body>

</html>[CODE]

Un pequeño fragmento del código que estoy trabajando, espero pueda ser de ayuda para localizar el problema. Nuevamente, muchas gracias por estar atento a mi solicitud.

Saludos.

masterpuppet · #6 (**permalink**) 30/05/2011, 11:13

De lo que estas mostrando veo dos cosas, el orden en el que estas cargando el core y more, primero debe estar core, otra cosa el form no tiene el id form1(talves fue un typo).

manuel2788 · #7 (**permalink**) 31/05/2011, 08:44

Solucionado el problema! cambié el orden de carga de more - core y listo. Gracias masterpuppet por la ayuda brindada.

Dato: Para todos aquellos que deseen utilizar FormCheck en la validación de formularios. Pendientes con la clase Confirm; el ejemplo (demo) que puede encontrarse en el site, es el siguiente:

<input type="text" class="validate['required']" name="password" id="password" />
<input type="text" class="validate['confirm[password]']" name="confirm" />

Dicho ejemplo, con la más reciente versión del framework no funciona. Deben cambiarlo por el siguiente:

<input type="text" class="validate['required']" name="password" id="password" />
<input type="text" class="validate['confirm:password']" name="confirm" />

Saludos.