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 should use the :invalid pseudo selector and the input or the change event, to solve your problem.

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

Here is a simple fiddle http://jsfiddle.net/trixta/YndYx/.

If you want to remove the error class as soon as possible you should add the error class on change and remove it on the input event (Note: input event is much better than here suggested keyup, simply because it also is triggered on paste etc., but it only works with input elements, not textarea.)

And here is a fiddle using a mixture of input and change event: http://jsfiddle.net/trixta/jkQEX/

And if you want to have this cross browser you can simply use webshims lib to polyfill. Here is a x-browser example: http://jsfiddle.net/trixta/RN8PA/

Answer 2

Have you tried using :valid to give an indicator as to whether a field is valid. and having forms that are invalid just keep their default styling.

Then calling form.checkValidity() in the submit handler? (The browser should then tell the end-user which form element is not valid).

Answer 3

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

Answer 4

Since these classes are always added when a form is submit, remove the class prior validating:

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

Expected result:

1. User initiates submit
2. onsubmit is triggered > All invalid class names within the form are removed.
3. The invalid events are triggered, and the invalid classes are added when necessary

Update

Added an extra block to your fiddle, see updated fiddle: http://jsfiddle.net/ceArQ/10/. I have implemented the checkValidity() method and the validity.valid property. Now, the classes are automatically added when the input is invalid.

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

On key-up, the validity of an input element is checked. If it's valid, the invalid class is removed from its parent.