Avatar of Luey
LueyFlag for United States of America

asked on 

html5 validation messages fixed position

I am using html5 required on form fields.  My form is long so the page scrolls.  When I test the validation the error messages have a fixed position and do not scroll with the page.  Is that a bug or am I doing something wrong.

<div>
<label for="company_name" class="text_field_18_label">Company Name</label></br>
<input id="company_name" class="text_field_18" name="company_name" required type="text" size="30" maxlength="50"/>
    </div>

Open in new window

HTML

Avatar of undefined
Last Comment
Luey
Avatar of Gary
Gary
Flag of Ireland image

Two lines of code are not enough, where is the css or a link to the page
Avatar of Luey
Luey
Flag of United States of America image

ASKER

Here is a fiddle I found on a forum.  Others have the same problem.
Fiddle

hit the submit button then scroll up and down.
Avatar of Gary
Gary
Flag of Ireland image

But when you scroll the page the validation disappears.
Avatar of Luey
Luey
Flag of United States of America image

ASKER

Chrome disappears ,  Firefox does not.
ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Gary
Gary
Flag of Ireland image

And it is disappearing for me too in all latest browsers
Avatar of Luey
Luey
Flag of United States of America image

ASKER

So in older browsers it makes you look like an idiot.  Is that what you are saying.
Avatar of Gary
Gary
Flag of Ireland image

You shouldn't be relying on HTML5 features when there are a lot of people using non HTML5 browsers.
If it's sticking it maybe due to your browser version when HTML5 features were only being brought in
What version are you using?
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

You may be happier with using a javascript/jquery validation.  

The validation in your sample will only point out the last field that did not have proper info.  Try it with many fields http://jsfiddle.net/LSF5h/2/

 However, never rely on any client side validation.  Serverside, I duplicate the same validation created client side and display errors without updating the db if there are any.

@Cd&  +10 for the newsletter!
Avatar of Luey
Luey
Flag of United States of America image

ASKER

I always use server side validation.  I have always relied on javascript for my client side validation but was trying to make the switch to html5.  I guess I will just stop testing in old browsers.  Thanks
HTML
HTML

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo