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

LueyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Two lines of code are not enough, where is the css or a link to the page
0
LueyAuthor Commented:
Here is a fiddle I found on a forum.  Others have the same problem.
Fiddle

hit the submit button then scroll up and down.
0
GaryCommented:
But when you scroll the page the validation disappears.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

LueyAuthor Commented:
Chrome disappears ,  Firefox does not.
0
COBOLdinosaurCommented:
The builtin validation of HTML5 is supposed to behave that way.  The specification is to set soft focus, and that is lost when you scroll.  It is doing exactly what is supposed to do. I don't know what version of FF you are using but in the latest version is disappears.  It also works correctly in IE10.


Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
And it is disappearing for me too in all latest browsers
0
LueyAuthor Commented:
So in older browsers it makes you look like an idiot.  Is that what you are saying.
0
GaryCommented:
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?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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!
0
LueyAuthor Commented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.