[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

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.
0
thenelson
Asked:
thenelson
  • 4
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
>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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
thenelsonAuthor Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
>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
 
thenelsonAuthor Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
Good luck!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now