Link to home
Start Free TrialLog in
Avatar of thenelson
thenelson

asked on

HTML5 required attribute is working but not the tooltip

I have a very complicated and long form with many fields with the HTML5 required attribute. When I run the page from my local drive, the tooltip displays under any field that is empty. But when I publish the form and run it from my server, the empty fields highlight, the form does not submit but the tooltip does not display.

A simple form works fine with the required attribute on my web server.

Any idea what is causing this strange behavior?

Here is the form: www.barnwellmd.com/patients/IntakeQuestionnaire.htm
Note: I know I shouldn't use MS Word to create a form. One of these days, i will have time to redesign the form.
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

>Note: I know I shouldn't use MS Word to create a form. One of these days, i will have time to redesign the form.

Now will be a good time.  The html that word generates is not meant for the modern web. The first thing I check is if there are any js errors by looking in chrome console or firebug.  I don't see any other then a warning, "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." but t his should not be an issue.

The next thing I look at is html validation and here is where you have some issues.  http://validator.w3.org/  Looking at the 600 errors is a lot although many are repeated.    Errors like, " Stray end tag span." or "A table row was 12 columns wide and exceeded the column count established by the first row (9)." can make a difference and break your validation.

I am going to check something else out too.  But it may be you just need to really simplify your html and get it done right.    You can spend a few hours to debug this or a few hours to get it done right.  One option may cause future problems...   I will get back to you in a few minutes.
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
My computer is substituting "Times New Roman" for both 'Wingdings' and 'Arial Narrow'.  I don't have 'Arial Narrow' and I don't know why it's not using 'Wingdings'.

As for the 646 errors, your page is not HTML5 compliant.  <!DOCTYPE html> invokes a specific set of HTML rules and your page is not following them.  DOCTYPE defines the rules that a web browser uses to render a page.
Avatar of thenelson
thenelson

ASKER

I changed:
<script src="jquery.h5validate.js"></script>
to:
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>

This took care of this problem.

Thanks!

I am definitely going to redesign the page but I am assuming this would take me a week or two not just a few hours unless someone has a shortcut or two to suggest.

Thanks everyone for your responses.
>week or two not just a few hours unless someone has a shortcut or two to suggest

Wax on.... wax off...

only practice makes it go faster.  It does look daunting but I think once you get into it it will go fast and maybe a day.   You have a lot of data and it  probably takes longer to set up the receiving end  of things.  

When you do redesign, look into using  tabs or a wizard for each section so you only see one section at a time.  The button for "Send Section to Dr Barnwell" saves the data to the db, hides section 1 and displays section 2.  Jquery can make this easy.  You can use jquery ui tabs or http://www.jquery-steps.com/, http://www.dbarnes.info/jWizard/, https://github.com/conzett/jquery.quickWizard,  http://thecodemine.org/
Scott,

Thanks!! I took a look at those references and they look great.  I will definitely use one of them when I redo the form.

So I am thinking of deleting all the crap that MS Word stuck in and see what I get. If it is workable, I can modify it from there.
Good luck!