Question

160

Event Listener valid for HTML5 forms

rated 0 times [ 161] [ 1] / answers: 1 / hits: 29477 / 13 Years ago, sun, october 30, 2011, 12:00:00

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.

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keyanah

Add To Favorites

Follow

Total Points: 642

Total Questions: 93

Total Answers: 114

Location: Virgin Islands (U.S.)

Member since Tue, Jul 7, 2020

4 Years ago

keyanah questions

1 Cannot find module 'fs/promises' even when I use the fs code only inside getStaticProps() - next js

Thu, Oct 14, 21, 00:00, 3 Years ago

1 Event click show the selected data with FullCalendar function

Wed, Apr 28, 21, 00:00, 3 Years ago

1 Error: querySrv ENOTFOUND _mongodb._tcp.dbname.fzofb.mongodb.net

Fri, Jan 8, 21, 00:00, 3 Years ago

1 How to use array map inside v-for loop in Vue?

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Is it possible to store a dotenv variable in a json file?

Thu, Jul 16, 20, 00:00, 4 Years ago

View All

answered 13 Years ago campbelljonahb · Accepted Answer

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/