Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

HTML5 required attribute is working but not the tooltip

Posted on 2013-12-28
7
344 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

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

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
alert(innerHTML); 8 32
innerHTML 7 34
AWK: How to strip all double quotes from a file? 7 24
message Alert on an empty search 10 20
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to count occurrences of each item in an array.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

856 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