Solved

HTML5 required attribute is working but not the tooltip

Posted on 2013-12-28
7
342 Views
Last Modified: 2013-12-29
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.
0
Comment
Question by:thenelson
  • 4
  • 2
7 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39744324
>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.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39744339
I just tried playing with your plug in and I only worked it fast and had some issues just making a sample.  It seemed like what h5validate had on their own demo and github did not jibe.

I have used http://jqueryvalidation.org/ with success and using sample html where I just added a div with class "error" to what you had it works http://jsbin.com/ePaXaVIv/1/

  <form>
    <input maxlength="30" size="30" name="first_name" title="fill in your first name" required><div class="error"></div>
  <input maxlength="30" size="30" name="Last_Name" title="fill in your last name" required><div class="error"></div>
    <button type="submit">go</button>
  </form>
$("form").validate({
		errorLabelContainer: $("form div.error")
	});

Open in new window

I used
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>

You still should have your validation in your php on the server side regardless of how this works on the client side.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39744349
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.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 39

Author Closing Comment

by:thenelson
ID: 39744831
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39744845
>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/
0
 
LVL 39

Author Comment

by:thenelson
ID: 39745025
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39745137
Good luck!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question