Is it possible to invoke a custom validation popup on a text box with Javascript?

Question

In Firefox when a text control has the attribute "required" a popup appears when the user does not enter any text:

            <input id="foo" type="text" name="foo" required>

Is it possible with Javascript to invoke the same such popup but with a custom message? Something like:

document.getElementById("foo").?message = "Custom message goes here!";
document.getElementById("foo").?invoke();

Yes, there are countless plugins/framework out there that offer this. — Jeremy Thille, Aug 25 '16 at 13:57
Possible duplicate of [Set custom HTML5 required field validation message](http://stackoverflow.com/questions/13798313/set-custom-html5-required-field-validation-message) — Andreas, Aug 25 '16 at 13:58

dmoo · Answer 1 · 2016-08-25T14:16:50.743

1

There are many possible ways to do this and almost coutless validation libraries. The absolute simplest and still relying on html5 is utilizing oninvalid and setCustomValidity.

Support is pretty much 100% at this point - http://caniuse.com/#feat=form-validation

<form>
  <input id="foo" type="text" name="foo" required oninvalid="this.setCustomValidity('Custom message goes here!')"/>
  <input type="submit"/>
</form>

edited Aug 25 '16 at 14:16

answered Aug 25 '16 at 13:58

dmoo

1,509
13
16

OK, that changes the message, but I asked how to invoke the message from Javascript. – gornvix Aug 25 '16 at 16:03

Is it possible to invoke a custom validation popup on a text box with Javascript?

1 Answers1