Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Event Listener valid for HTML5 forms

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

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

    Please note, this event just works when submitting the form... If I style the input input:invalid { background: red }, the style is applied when the user starts typing and his input is not valid. Is that event only fired on submit? I tried adding the listener to the inputs themselves instead of the document and it didn't work.

  2. I add a listener in order to apply a style to the input's parent... Now, when the user corrects it, it's valid again... I know there's not a "valid" event, so, how can I accomplish it?


Ok, so here's a fiddle --> http://jsfiddle.net/Osoascam/ceArQ/7/ The invalid listener seems to be only fired on submit... I just wanted to know whether there's a way to add a handler just like there is for focus. See that if you type a

Thanks in advance,

Óscar

like image 925
Óscar Avatar asked Oct 30 '11 17:10

Óscar


People also ask

Which is the valid HTML5 forms?

HTML5 Form Featuresautofocus, required, placeholder, autocomplete, pattern, minlength, readonly, list. meter, progress, datalist.

Does HTML5 have form validation?

Form validation can happen on the client side and the server side. Client side validation occurs using HTML5 attributes and client side JavaScript.

What is an event listener HTML?

The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events.

What is event listener used for?

An event listener is a procedure or function in a computer program that waits for an event to occur. Examples of an event are the user clicking or moving the mouse, pressing a key on the keyboard, disk I/O, network activity, or an internal timer or interrupt.


2 Answers

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/

like image 61
alexander farkas Avatar answered Oct 22 '22 11:10

alexander farkas


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.

like image 39
Rob W Avatar answered Oct 22 '22 12:10

Rob W