cómo borrar el error al usar jquery validate y personalizado errorPlacement

Question

Estoy usando jquery y validar para validar mi formulario. En lugar de añadir un elemento al campo faltante Estoy añadiendo un borde al elemento uso de esta opción errorPlacement

$("#signup-form").validate({ 
     submitHandler: function(form) { 
     form.submit(); 
    }, 
    errorPlacement: function(error, element) { 
     element.css("border", "solid 1px red"); 
    }      
}); 

Lo único que parece que no puede averiguar es cómo borrarlos cuando válida?

Así que comencé con el código anterior. Luego intenté y estoy confundido con los resultados. Si no tengo la opción success: cuando un campo falla, agrega la clase con éxito. Pero tan pronto como agregue la opción success todos los campos requeridos están obteniendo esa clase, y si inspecciono el elemento veo <input class="required invalid valid"> entonces estoy haciendo algo incorrectamente.

  $("#signup-form").validate({ 
       submitHandler: function(form) { 
        // do other stuff for a valid form 
        //form.submit(); 
       }, 
       errorPlacement: function(error, element) { 
        element.addClass("invalid"); 
       },   
       success: function(error) { 
        // change CSS on your element(s) back to normal 
       },      
       debug:true 
      }); 

Answer 1

Usted podría intentar agregar esto a su lista de opciones .validate() ...

success: function(error) { 
    // change CSS on your element(s) back to normal 
} 

Esto debería funcionar de forma dinámica sin un formulario de envío. Tan pronto como se resuelva el error, se ejecutará el código contenido.

Ver documentation.

Cree una demostración de su problema utilizando jsFiddle. Aquí está a blank jsFiddle con .validate() ya incluido y listo para usar.

---

EDIT

Según OP's jsFiddle, hice estos cambios ...

errorPlacement: function(error, element) { 
     $(element).filter(':not(.valid)').addClass("invalid"); 
    }, 
    success: function(error) { 
     console.log(error); 
     $("#signup-form").find('.valid').removeClass("invalid"); 
    } 

demostración de Trabajo:http://jsfiddle.net/u3Td3/6/

secundarios notas: También tenía algo de HTML iss ues. Debe "cerrar automáticamente" sus elementos input con />. Lo mismo para el botón Enviar, cierre automático en lugar de usar un </input>. Consulte validator.w3.org para validar su HTML. Tampoco usaría un table para diseños, use CSS.