validacion - validar formulario javascript onclick

Escucha de eventos válida para formularios HTML5

Question

1. Lo nuevo en HTML5 es un evento "no válido", al que puede agregar un oyente:

   document.addEventListener(''invalid'', function(e){
      var element = $(e.target);
      element.addClass("invalid");
      element.parent().addClass("invalid");
   }, true);

   Tenga en cuenta que este evento solo funciona al enviar el formulario ... Si estilo la entrada de input:invalid { background: red } , el estilo se aplica cuando el usuario comienza a escribir y su entrada no es válida. ¿Ese evento solo se activa en submit? Intenté agregar el oyente a las entradas en lugar del documento y no funcionó.

2. Agregué un oyente para aplicar un estilo al padre de la entrada ... Ahora, cuando el usuario lo corrige, es válido de nuevo ... Sé que no hay un evento "válido", entonces, ¿cómo puedo lograrlo?

Ok, entonces aquí hay un violín -> http://jsfiddle.net/Osoascam/ceArQ/7/ El oyente no válido parece estar activado en el envío ... Solo quería saber si hay una manera de agregar un controlador solo como hay para enfocarse. Mira que si escribes un

Gracias por adelantado,

Óscar

Answer 1

¿Ha intentado usar :valid para dar un indicador de si un campo es válido? y tener formularios que no son válidos solo conserva su estilo predeterminado.

Luego, llama a form.checkValidity() en el controlador de envío? (El navegador debe decirle al usuario final qué elemento de formulario no es válido).

Answer 2

Como estas clases siempre se agregan cuando se envía un formulario, elimine la clase antes de validar:

$(''#myForm'').submit(function(){
    $(''.invalid'', this).removeClass(''invalid''); // Remove all invalid classes
    $(this).removeClass(''invalid'');             // If the parent = form.
    // Normal validation procedure.
});

Resultado Esperado:

1. El usuario inicia el submit
2. onsubmit se activa> Se eliminan todos los nombres de clase invalid dentro del formulario.
3. Los eventos invalid se activan y las clases invalid se agregan cuando es necesario

Actualizar

Se agregó un bloque adicional a tu violín, mira el fiddle actualizado: http://jsfiddle.net/ceArQ/10/ . Implementé el método checkValidity() y la propiedad validity.valid . Ahora, las clases se agregan automáticamente cuando la entrada no es válida.

document.addEventListener(''keyup'', function(e){
    var input = e.target;
    if (!$.nodeName(input, ''input'')) return;
    input.checkValidity();
    var element = $(input).parent();
    if(input.validity.valid) {
        element.removeClass(''invalid'');
        element.parent().removeClass(''invalid'');
    } else { //Remove the lines below if you don''t want to automatically add
             // classes when they''re invalid.
        element.addClass(''invalid'');
        element.parent().removeClass(''invalid'');
    }
});

En la tecla, se verifica la validez de un elemento de entrada. Si es válido, la clase invalid se elimina de su principal.

Answer 3

Debería usar el pseudo selector inválido y la entrada o evento de cambio para resolver su problema.

$(document).bind(''change'', function(e){
    if( $(e.target).is('':invalid'') ){
        $(e.target).parent().addClass(''invalid'');
    } else {
        $(e.target).parent().removeClass(''invalid'');
    }
});

Aquí hay un violín simple http://jsfiddle.net/trixta/YndYx/ .

Si desea eliminar la clase de error tan pronto como sea posible, debe agregar la clase de error al cambiar y eliminarla en el evento de entrada (Nota: el evento de entrada es mucho mejor que la clave aquí sugerida, simplemente porque también se desencadena en pegar, etc. , pero solo funciona con elementos de entrada, no textarea.)

Y aquí hay un violín usando una mezcla de entrada y evento de cambio: http://jsfiddle.net/trixta/jkQEX/

Y si quiere tener este navegador cruzado, simplemente puede usar webshims lib para rellenarlo. Aquí hay un ejemplo de x-browser: http://jsfiddle.net/trixta/RN8PA/

Answer 4

Puede vincular su lógica de validación a los eventos de focus y blur , o para ser aún más receptivo, al evento keyup .

$(''input'').keyup(function() {
    if(isValid(this)) {
        $(this).removeClass(''invalid'').parent().removeClass(''invalid'');
        $(this).addClass(''valid'').parent().addClass(''invalid'');
    }
    else {
        $(this).removeClass(''valid'').parent().removeClass(''valid'');
        $(this).addClass(''invalid'').parent().addClass(''invalid'');
    }
});