- jackieshellerAsked on April 04, 2012 at 10:54 PM
I understand and can easily deal with the regular field verification messages, and have customized the look/feel of them with CSS rules easily. However, in my email field if someone does not enter a correct email and then tries to submit it, another type of popup completely shows up. I'm not sure how to turn this popup off, style it, or anything and am stumped. Could you help me understand what this popup is and how to deal with it?
I will attach some example screenshots.
The first is what this 2nd error message looks like in firefox. It happens when you click submit.
The second is a screenshot of this type of message in chrome. Notice that the frame that surrounds this screws up the layout of my page as well because it extends much further down the page than just the fields. Not sure what is going on.
Here is the link: https://www.dropbox.com/sh/jxspp08cxdsqf5r/l5WM35tn4P/Picture%201.png
The last is of a regular field validation error message (which I like). This type is no problem to deal with. For some reason when submit is hit, though, this type turns into the bigger and more ugly type, which I can't figure out how to style and which is large enough that it messes with my site layout a bit.
This can be tested right in jotform via the preview, so I don't think it is something to do with my site. Probably something simple that I am missing.
- JotForm SupportidarktechAnswered on April 05, 2012 at 09:12 AM
Sorry for getting back to you so late. To my knowledge, this is an HTML5 browser related issue. Every browsers has its default style validation error and we can't do something about that, I think. I got here a simple code that removes the default email validition error on Chrome browser, but it's totally not working on Firefox as it has its own style of validation error. I don't think this is a good idea though. Here: http://jsfiddle.net/XYgJH/11/, just replace 'Please enter an email address.' with two spaces then run, that would remove the error when you type something on the box which is not on email format. You can also test that on your forms.
Maybe this article is also useful for you: http://www.html5rocks.com/en/tutorials/forms/html5forms/
Hope this information helps. Thanks.