Ir al contenido principal

Validar formularios con Jquery

P

ara poder validar los campos de un formulario con jQuery desde el lado del cliente, lo primero que debemos hacer es descargar la librería jQuery, en caso de no tenerla, desde la página oficial del proyecto y segundo descargar el publing validate desde aquí.



Para poder usar el pluging validate lo único que debemos hacer es mover el contenido de los ficheros descargados, por ejemplo, a la carpeta js y estará listo para usar.


El código que debemos añadir al HTML es:
Dentro de la cabecera



//realizar una llamada a la librería jQuery y a Validate
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript">
//Una vez que se cargue la primera parte de la página ya se podrá usar la librería
 $().ready(function() {
  // validate the comment form when it is submitted
  $("#Forms").validate();
 });
</script>

//Le damos formato a los mensajes de error
<script type="text/css">
#Forms label.error {
margin-left: 10px;
width: auto;
display: inline;
color: red;
}
</script>

Dentro de los imputs que queramos validar del formulario debemos tener cuidado de que su marca name tenga el mismo valor que dentro de la función de del plugin Validate



<td class="obligatorio">Nombre (Obligatorio)</td>
<td>
<input id="cname" name="name" class="required" minlength="2" />
</td>

Donde class="required" significa que el parámetro es obligatorio, pudiendo añadir más restricciones a continuación.


En la documentación oficial tendremos las especificaciones de todas las funciones que se pueden usar, e incluso podréis añadir vuestras propias funciones para realizar validaciones que no estén incluidas.


En este blog podéis encontrar funciones añadidas para completar las validaciones en formularios.
Validar DNI en formularios
Validar Fecha en formularios
Validar Email en formularios
Validar Número de cuenta bancaria en formularios


Comentarios

  1. hola son buenos los ejemplos pero deberias poner un ejemplo a cada aplicacion

    ResponderEliminar
  2. Hola,

    a que te refieres con poner un ejemplo a cada aplicación¿?

    Los artículos que se referencian al final de este artículo son ejemplos de funciones específicas que puedes añadir a este plugin de jQuery.
    Este es un ejemplo de validar el DNI de una persona: http://xandrusoft.blogspot.com/2009/08/validar-dni-en-un-formulario.html

    Espero que te sirvan.

    Un saludu

    ResponderEliminar
  3. MUY BIEN MATERIAL MUCHAS GRACIAS

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Exportar archivo de configuración de WinSCP

S i estamos trabajando con WinSCP seguro que ya hemos guardado distintas sesiones para acceder a ellas directamente en futuras ocasiones y evitar volver a introducir todos los parámetro de configuración. Seguro que también muchos de vosotros habéis agrupado las sesiones en carpetas dependiendo de la naturaleza de las mismas. Este trabajo ocupa un valioso tiempo que no nos podemos permitir repetirlo para todos los equipos que tenemos, por lo que lo más lógico es configurar todas las sesiones y exportar su configuración al resto de equipos , teniendo una sola versión y evitarnos tener que volver a configurar todas las sesiones en cada uno. El problema es que WinSCP no nos muestra la opción de exportar de una forma sencilla, por lo que tendremos que buscarnos la vida. Lo primero que debemos hacer es abrir el programa y acceder a Preferencias -> Almacenamiento (o su equivalente al inglés) En esta pantalla deberemos indicar que almacene la configuración en un archivo

Asignar valores por defecto a input=”file” y a textarea

S eguro que muchos os habéis estado rompiendo la cabeza buscando la forma de dar un valor por defecto a el tipo de dato input=”file” . Pues que sepáis que no se puede!!! No se puede dar un valor por defecto a los campos de este tipo, ya que hacen referencia a una ruta física local y podrían surgir problemas de seguridad. Lo que se puede hacer, por ejemplo, es mostrar la imagen o el nombre del dato que tenemos almacenado y si el usuario desea modificarla, ofrecerle la opción de cargar una nueva. La etiqueta textarea , aunque pueda parecérnoslo, no se trata de un input y para darle valor por defecto simplemente debemos mostrar el texto que deseemos entre su marca de apertura y de cierre. Es decir, en caso de que lo que deseemos mostrar por defecto sea una variable, introduciremos el siguiente código: <textarea id="txtobservaciones" name="txtobservaciones" rows="2" cols="40" class="txt" ><?=$_POST["txtobservaciones"] ?&

Configuración de archivo de Logs para IpTables

I pTables se usa para configurar, mantener e inspeccionar las tablas de reglas de filtrado de IPs en el kernel de Linux, pero por defecto, su sistema de logs no es todo lo completo esperamos. Por defecto, la mayoría de los logs del sistema se guardan en el fichero /var/log/messages pero en este caso vamos a configurar un nuevo fichero para que almacene únicamente los logs que generaremos con algunas reglas en IpTables , creando así su propio archivo de bitácora . Lo primero que debemos hacer es configurar el archivo /etc/syslog.conf , que se trata de un archivo de configuración en el que se indica el modo en que los mensajes del sistema son bitacorizados a través de la utilidad syslogd que se instala y configura por defecto en todos los sistemas GNU/Linux . Debemos añadir al final del fichero la siguiente sentencia: kern.warning /var/log/iptables.log Con esto indicamos que se almacenen los mensajes provienen del kernel con prioridad 4 o superior ('warning' es el nivel de