-1

I'm trying to understand why I can't get browser validation error messages to show based on HTML validation.

I have a field in my markup that I want to validate, and a link that investigates its validity in order to know whether to fire on click. Notably, this isn't within a form, and from reading of the HTML spec it's not clear to me if that's an issue. Certainly, the fact I can use the checkValidity method for a field outside of a form suggests to me it's worth looking at.

HTML

<input type="email" id="email" required="required">
<a id="link" href="some_external_link" target="_blank">Do the thing</a>

JavaScript/jQuery

$("#link").on("click", function(event) {
  var email = $('#email')[0];
  if (!email.checkValidity()) {
    event.preventDefault();
  }
});

From the behaviour I've seen so far, when I put it in an invalid e-mail address and try to click the link, I would expect this to (based on the spec) fire a "simple event", which, as I understand it, is what browser error message display must be hooked into.

But instead no validation messages appear. The validation does fail and the link follow is prevented, and the reverse is true if I fill in a valid e-mail. Am I missing something about how the event is fired or handled?

There's other answers that involve creating a form and submit button around the field, which will be my last resort, but that's a lot of extra meaningless noise to get the desired functionality, and I'd like to understand the root causes of what I'm seeing.

TylerH
  • 20,799
  • 66
  • 75
  • 101
simple
  • 100
  • 9
  • The spec you link to talks about forms all the way through: it starts with *"When the user agent is required to statically validate the constraints of **form element** [..]"* and rule #1 is *"Let controls be a list of all the submittable elements whose form owner is form, in tree order."* – I don't see why you expect form validation to trigger in this specific case where a) you don't have a form and b) you don't have any code that could be expected to trigger validation. – JJJ Oct 10 '16 at 14:52
  • I suspect that the "email.checkValidity()" on line 5 triggers the validation, since it accurately describes if the field is valid or not. Given the info in my post - that the validation happens field-by-field and reports that with simple messaging - I suspect there's an event I can hook into, and I'm just failing to find it. – simple Oct 10 '16 at 14:54
  • 1
    and what is `email`? don't rely on element ID's as globals across all browsers. Provide a [mcve] – charlietfl Oct 10 '16 at 14:55
  • Well, it doesn't. It's literally meant to check for validity *without* triggering the browser's native behavior. – JJJ Oct 10 '16 at 14:55
  • @JJJ is that what the spec says? – simple Oct 10 '16 at 14:56
  • Yes, that's exactly what it says. – JJJ Oct 10 '16 at 14:57
  • @JJJ can you help me to find where? All I can see is: _"Returns true if the element's value has no validity problems; false otherwise. Fires an invalid event at the element in the latter case."_ under the method description. It was my assumption that this is the event that browsers hook into, but I can't see any more information on that. – simple Oct 10 '16 at 15:00
  • @charlietfl edited the question, thanks. – simple Oct 10 '16 at 15:00
  • 1
    so if there is no form how can anything be *required*? – charlietfl Oct 10 '16 at 15:02
  • @charlietfl It doesn't seem semantically incorrect to me to mark a field as required out of a form, but I don't know the HTML spec well. I suspect I will end up using a dummy form, but I want to understand the validation event chain regardless. – simple Oct 10 '16 at 15:05
  • but that means required as part of the submit...if no form to submit it makes sense it would have no relevance – charlietfl Oct 10 '16 at 15:06
  • @charlietfl Note the question isn't "How do I make this validation message show?", but rather about the event chain. That's the bit of learning I'm trying to achieve here. – simple Oct 10 '16 at 15:06

1 Answers1

0

As far as I can see, there is no external event that can be hooked into - the browsers don't publish anything from an individual element as it is validated, but rather do all the work internally as they process a form.

There is a method called reportValidity() in some early W3C docs, which is available in Chrome and on the list for possible Firefox features, and although isn't enough to mean it's usable yet, this helped to point out that checkValidity() doesn't show the validation errors to a user by itself.

If you want to get this functionality for the moment, you'll either have to wrap your controls in a form and suppress its default submitting behaviour in Javascript, or signal the failed validation to the user in a way other than the browser's default implementation.

simple
  • 100
  • 9