Validar formulario en HTML5

Aquí dejo un trozo de código donde se valida un pequeño formulario en HTML5, es bastante descriptivo. Para más información consultar el post original (en inglés): “CONSTRAINT VALIDATION: NATIVE CLIENT SIDE VALIDATION FOR WEB FORMS”.

<form id="passwordForm" novalidate>
    <fieldset>
        <legend>Change Your Password</legend>
        <ul>
            <li>
                <label for="password1">Password 1:</label>
                <input type="password" required id="password1" />
            </li>
            <li>
                <label for="password2">Password 2:</label>
                <input type="password" required id="password2" />
            </li>
        </ul>
        <input type="submit" />
    </fieldset>
</form>
<script>
    var password1 = document.getElementById('password1');
    var password2 = document.getElementById('password2');

    var checkPasswordValidity = function() {
        if (password1.value != password2.value) {
            password1.setCustomValidity('Passwords must match.');
        } else {
            password1.setCustomValidity('');
        }        
    };

    password1.addEventListener('change', checkPasswordValidity, false);
    password2.addEventListener('change', checkPasswordValidity, false);

    var form = document.getElementById('passwordForm');
    form.addEventListener('submit', function() {
        checkPasswordValidity();
        if (!this.checkValidity()) {
            event.preventDefault();
            //Implement you own means of displaying error messages to the user here.
            password1.focus();
        }
    }, false);
</script>

 

Entradas relacionadas:

  1. Usando HTML5 localStorage en un formulario
  2. Utilización de LDAP con PHP
  3. Try … catch en javascript
  4. 10 funciones javascript
Etiquetado con: , ,
Publicado en: Programación

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*