Bueno gente, este un elemento que he querido colaborar con ustedes, me ha costado un poco, crear este elemento, porque todo esta hay pero no hay un ejemplo claro que esto se pueda hacer, pero si, es posible.
El cuento es que se puede colocar en vez de un aviso al lado del elemento del formulario un alert(), que saldría cada vez que queramos validar el elemento, este lo he creado gracias a mi amiga Nury, que me ha llegado un dia con esta inquietud
Entonces bueno vamos al codigo.
para que todo esto nos funcione utilizaremos la libreria basica de jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
y la libreria Validate para JQuery, esta libreria nos permite validar los formularios de forma mas simpe y limpia.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" ></script>
Ahora si iniciamos el script de validacion de nestro pequeño formulario.
<script type="text/javascript">
</script>
Para empezar, usamos el metodo ready para iniciar nuestro codigo, este lo usa JQuery para indicar que ya se ha cargado la pagina y esta listo para trabajar.
Para empezar, usamos el metodo ready para iniciar nuestro codigo, este lo usa JQuery para indicar que ya se ha cargado la pagina y esta listo para trabajar.
$(document).ready(function(){...});
Ahora, como es comun en JQuery, colocamos con el simbolo de numero y el id del formulario que vamos a validar
$("#comment").validate({...});
Ahora debemos crear las reglas de validacion,
rules: {...}
llamamos por el nombre cada campo que necesitemos, para este caso usaremos dos campos "nombre" y "apellido", asi podremos ver clara mente como se usa normalmente una validacion y como seria con una alerta
empecemos por el campo nombre, donde indicaremos que es un campo requerido
nombre:{required: true},
ahora miremos el campo apellido, repetimos lo mismo que para el campo apellido
apellido:{required: true}
terminamos con las reglas y empezamos con los mensajes para estas reglas.
messages: {...}
ahora pondremos un mensaje para el required del campo nombre
nombre: {required: "Este campo es requerido");}
y aqui es donde esta la diferencia, ahora pondremos una alerta para el required del campo apellido
apellido: {required: function(){alert("El campo apellido no puede estar en blanco");}
esto es porque el required no solo recibe un texto tambien recibe un CallBack, lo cual nos permite hacer una funcion y regresar un dato diferente o hacer como en este caso una accion diferente.
Solo nos queda entonces crear nuestro formulario, supongo que para este punto no requeriran que explique como crear un formulario.
<form action="" method="post" id="comment">
<label from="nombre" value="Nombre">
<input type="text" value="" name="nombre" id="nombre"/>
<input type="text" value="" name="nombre" id="nombre"/>
<label from="Apellido" value="Apellido">
<input type="text" value="" name="apellido" id="apellido"/>
<input type="submit" value="Guardar"/>
</form>
<input type="text" value="" name="apellido" id="apellido"/>
<input type="submit" value="Guardar"/>
</form>
El resultado de este simple proceso quedaria asi
<html>
<head>
<title></title>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css"
type="text/css" media="all" />
<link rel="stylesheet"
href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css"
type="text/css" media="all" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"
type="text/javascript"></script>
<script
type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"
></script>
<script
type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js"
></script>
<script
type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#comment").validate({
rules: {
nombre:{required: true},
apellido:{required: true}
},
messages: {
nombre:
{required: "Este campo es requerido"},
apellido:
{required: function(){alert("El campo apellido no puede estar en
blanco");}}
}
});
});
</script>
</head>
<body>
<form action=""
method="post" id="comment">
<label
for="nombre">Nombre</label>
<input type="text"
value="" name="nombre" id="nombre"/>
<label
for="apellido">Apellido</label>
<input type="text"
value="" name="apellido" id="apellido"/>
<input type="submit"
value="Guardar"/>
</form>
</body>
</html>
Bueno espero que esto les pueda ayudar a crear proyectos mas acorde a las necesidades de los usuarios, el uso de la alerta es solo un ejemplo basico de como se puede llegar a usar una fucion para la validacion de los fomularios gracias a JQuery y Validate.
No hay comentarios:
Publicar un comentario
Cualquiera que sea tu opinión, déjala escrita eso me ayudara a mejorar mi blog.