0

I have a html5 date control with a min/max contraint as below.

<input class="testclass" type="date" min="2020-02-01" max="2020-03-01"/>

The control can sometimes be loaded via ajax and there may be occasions when there are multiple of these controls on a form. I intend to catch the invalid state on submit so I can display the error in a way which is more coherent with the rest of the error messages in the forms.

The above works perfectly if I directly wire up the event listener to the specific control. However as it can be loaded by ajax, can appear multiple times, and I don't know the id's in advance; I really want to wire it up at the document level using something akin to the following:

  $(document).on("invalid", ".testclass", function (evt) {
    //Do stuff
  });

But when invalid this does not get hit (it is invalid and the default message shows etc). However the input event, if wired up the same way is hit as expected. I just can't see what I'm doing wrong. I've included a fiddle for anyone who wants to see it.

https://jsfiddle.net/thnderchild/dzm1sgvc/13/

TylerH
  • 20,799
  • 66
  • 75
  • 101
Greasy_Spoon
  • 1
  • 1

1 Answers1

0

Okay, so the answer I finally found was that the invalid event simply doesn't bubble, so a global event handler never receives the event.

I was under the impression all events bubbled up.

Which jQuery events do not bubble?

So if we use this as a control which is added to the dom via ajax - we have to bind/rebind the event.

Greasy_Spoon
  • 1
  • 1