Geek Answers Handbook

Is it possible to access using CSS or JavaScript popup that appears if the input does not match its template attribute?

I played with the template attribute and, of course, tried to send form string that intentionally did not match the required template, given the HTML:

 <form action="#" method="post"> <input type="text" pattern="[AZ]{2,3}" /> <button type="submit">Submit</button> </form>

JS Fiddle demo .

I tried sending using 1 , which, of course, led to browser error handling (Chrome 21):

hgdsg.png

I tried right-clicking the pop-up window and “check the item”, but with respect to Web developer tools, I seem to be looking at the input element (which makes sense, I suppose), and not the pop-up dialog. So, I was wondering: is it possible to access / interact with this dialog via JavaScript (for sensitive improvements) or CSS (for styling)?

The main goal is to offer high-contrast alternatives for custom enhancements or just pop-ups that are compatible with site style and color schemes.

Edited for link to MDN for compatibility information:

+4
source share
3 answers

You can create a pop-up style, but support is limited and only works in webkit-based browsers. As for other browsers, there may be similar pseudo selectors that you can use, but I could not find them.

It comes down to finding / finding out the DOM structure of these pop-ups, and then adding CSS that will modify them. After all, these are just DOM elements.

example: http://jsfiddle.net/zbwJP/1/

documentation

+3
source

Recent Chrome Iterations Added Support for the Following Pseudo Selectors

 ::-webkit-validation-bubble{} ::-webkit-validation-bubble-top-outer-arrow{} ::-webkit-validation-bubble-top-inner-arrow{} ::-webkit-validation-bubble-message{}

Check here for some info.

Firefox has support for the x-moz-errormessage element attribute, which allows you to change the text of the error message. Info here

Could not find if Firefox has a way to create error bubbles.

+2
source

The popup dialog is different from browser to browser. There is no way to stylize them (for a cross browser).

The workaround should be to use jQuery popup dialogs that you could bind to this event.

You will find more about this here:

http://jqueryui.com/demos/dialog/

0
source

More articles:


All Articles