Solved

HTML5 required attribute is working but not the tooltip

Posted on 2013-12-28
7
340 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

911 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now