Event Listener valid for HTML5 forms

Question

1. New on HTML5 there\'s an \"invalid\" event, to which you can add a listener:

   document.addEventListener(\'invalid\', function(e){
      var element = $(         
   
   
           

Answer 1

You could bind your validation logic to the focus and blur events, or to be even more responsive, to the keyup event.

$('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');
    }
});