validate.js

(by: http://www.webintenta.com/)

Validate.js es un pequeño script para la validación de formularios cuyo tamaño apenas supera 1Kb en su versión comprimida. Otros puntos a tener en cuenta es que no depende de otras librerías como jQuery o Mootols y que se pueden personalizar los mensajes. Un ejemplo sencillo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validate JS</title>
<script type="text/javascript" src="http://webintenta.com/validate.min.js"></script>
</head>
<body>
<div id="errores"></div>
<form method="post" action="#" name="formulario">
        <label for="req">Campo Obligatorio:</label>
        <input id="req" name="req">
        
        <label for="alphanumeric">Campo alfanumérico:</label>
        <input id="alphanumeric" name="alphanumeric">
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        
        <label for="password_confirm">Confirmar Password (La contraseña debe coincidir):</label>
        <input type="password" id="password_confirm" name="password_confirm">
        
        <label for="email">Email:</label>
        <input id="email" name="email">
        
        <label for="minlength">Longitud mínima (min. 8 caracteres):</label>
         <input id="minlength" name="minlength">
        
        <button name="submit" type="submit" >Enviar</button>
    </form>
 <script type="text/javascript">
var validator = new FormValidator('formulario', [{
    name: 'req',
    display: 'Campo Obligatorio',    
    rules: 'required'
}, {
    name: 'alphanumeric',
    display: 'Campo alfanumérico',  
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'Confirmar Password',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email'
}, {
    name: 'minlength',
    display: 'Longitud mínima',
    rules: 'min_length[8]'
}], function(errors, events) {
    if (errors.length > 0) {
        alert("errores");
                var el = document.getElementById("errores");
                el.innerHTML = errors.join('<br />');
    }
});
// Validate JS también permite establecer mensajes personalizados
validator.setMessage('required', 'El campo %s es obligatorio.');
</script>
</body>
</html>

Ver ejemplo en funcionamiento » »

validate.js » »


original post: http://www.webintenta.com/validatejs.html?utm_source=feedburner&utm_medium=fe…

Anuncios

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

A %d blogueros les gusta esto: