• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 839
  • Last Modified:

HTML5 Input validation popup

Is there any way to style the validation popup.
FF it looks (almost) acceptable, Chrome it looks wrong being centered on the input and in IE it looks like plain yuck
If there is nothing that works cross browser then I will stick with js.
0
Gary
Asked:
Gary
  • 4
  • 4
1 Solution
 
smeghammerCommented:
Rather than use the default alert() or confirm() (which is what I assume you are doing?) consider generating your own popup window or hidden div popup.

The popup window is easy to code, but difficult to enforce (it is an independent browser window/tab after all).

The hidden div is better because it can enforce the modality (if that is what you need) and you can nicely disable/grey out the rest of the page (think LightBox).
0
 
GaryAuthor Commented:
Do you know what I am talking about - I don't think so.
0
 
COBOLdinosaurCommented:
Gary,

I think you can play with the font properties a little with jquery, but the box itself is pretty much immune to CSS.  I have been playing with <datalist> for inputs and it is the same kind of limitations.  The major browsers have not used the same presentation because W3C left the rendering pretty much undefined because it was not supposed to be altered with CSS.

We may see some improvement in coming releases if the manufacturers decide it is a way to get a competitive advantage; but don't hold your breath.

10 years ago we had the same kind of problems with form elements in general (select was the worst) and eventually the browser allowed more and more flexibility, because developers kept complaining.  Probably what it will take to solve this.


Cd&
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
GaryAuthor Commented:
That's what I thought after coming up blank Googling it.
It would be acceptable if it didn't just look plain horrible in IE
0
 
COBOLdinosaurCommented:
Well it is IE after all; and they need to keep a consistent image. ;^|
Cd&
0
 
GaryAuthor Commented:
Don't know why they didn't make it stylable in what is supposed to be HTML for the future.
0
 
COBOLdinosaurCommented:
The whole set of "validation" options was a political football.  They were dropped from some drafts of the standard because the manufacturers could not agree on the specification.  It looked like they would not make it in at all.  They were all listed "at risk" for most of the time and many were surprised to see them suddenly back in at the Candidate Recommendation stage. In the end the compromise was a basic specification on functionality with no specification for rendering or behavior.

Cd&
0
 
GaryAuthor Commented:
Well with IE seeming to be on quicker release cycle maybe things like this will only plague us for a few months before being fixed cross browser.
0
 
COBOLdinosaurCommented:
A quicker release cycle is positive as long as they do not follow the Google model of putting a date and list of features on a whiteboard and releasing everthing on the list even if it is buggy.

I prefer the Mozilla approach where nothing gets promoted based on manager signoff, the developer, the manager, and the lead tester for the module all have to signoff or it does not get promoted, It means they sometimes have to explain a delay implementing something, but at least when they say something works it actually does work in that release, not three releases later when they finally get it debugged.

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now