thenelson
asked on
h5Validate and html5form not working in IE
I cannot get h5Validate or html5form to work with IE 9 or earlier. I added the code recommended on the sites (http://ericleads.com/h5validate/ and https://code.google.com/p/html5form/) and loaded jquery.h5validate.js onto my server. For both addins, when I hover over a field, I get a hint that the field is required but when I click submit, the form goes through with the field empty. The forms I tried work as expected when used with the HTML5 supported browsers Firefox and Chrome. I created a very simple test page (attached) but it also does not work. I can't figure out what I am doing wrong.
test.html
test.html
Dave Baldwin
You can go to this site http://html5test.com/ to see if the features you want to use are supported in those browsers.
ASKER
I already know that IE9 and earlier do not support the HTML5 required attribute. h5Validate and html5form are server side plugins that provide this capability to browsers without that support. I am asking for help with those plugins.
Javascript usually works on 'id' so I have added those and moved the javascript to the <head> section. See if this works any better for you.
<!DOCTYPE html>
<html>
<head>
<title>Intake Questionnaire - Jane Barnwell, MD</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.h5validate.js"></script>
<script>
$(document).ready(function () {
$('IntakeQuestionnaireSection1').h5Validate();
});
</script>
</head>
<body>
<form enctype="text/plain" method="post" action="https://www.barnwellmd.com/Uploadroutines/upload.php" name="IntakeQuestionnaireSection1">
<input name="First_Name" id="First_Name" placeholder="First Name" title="First name is required." required >
<br>
<input name="formname" id="formname" value="/UF(/IntakeQuestionnaireSection1.txt)" type="hidden">
<input value="Clear section 1 and start over" name="Reset" id="Reset" onclick="return confirm('Are you sure you want to start over?')" type="reset">
<br>
<input value="Send section 1 to Dr. Barnwell" name="submit" id="submit" type="submit">
<br>
<input value="Print Entire Form" name="Print" id="Print" onclick="window.print()" type="button">
</form>
</body>
</html>ASKER
The instructions for h5Validate state to put the code at the bottom of the body but, hay, it was a good suggestion and worth a try. I did as you suggested but no dice. Oh well....
Maybe you should click on "Request Attention" above and get the jQuery zone added so some others will look at your question.
Here is a test[age with the css and migrate plugin added
http://plungjan.name/ee/html5validate.html
I can look in IE9 tomorrow
http://plungjan.name/ee/html5validate.html
I can look in IE9 tomorrow
ASKER
mplungjan,
I'm afraid that page also just submitted the form when the field was empty in IE9.
I'm afraid that page also just submitted the form when the field was empty in IE9.
Sure, I did not change anything. I'll look in 4 hours, 5am here
Hi,
I do not use jquery, etc., so take the following as a possibility and not gospel:
From what I understand, the purpose of the h5validate function is to force validation on a field; it does not prevent submission.
if you go to:
http://ericleads.com/h5validate
and simply click on the Submit button
(1st form within "FEATURES" heading, "Hint: Select it, then click somewhere else without typing anything.")
without selecting the field, the form submits without a value:
http://ericleads.com/h5validate/?name=
Your recourse:
$(‘#myForm’).submit(functi
return $(‘#myForm’).h5Validate(‘a
Vinny
I do not use jquery, etc., so take the following as a possibility and not gospel:
From what I understand, the purpose of the h5validate function is to force validation on a field; it does not prevent submission.
if you go to:
http://ericleads.com/h5validate
and simply click on the Submit button
(1st form within "FEATURES" heading, "Hint: Select it, then click somewhere else without typing anything.")
without selecting the field, the form submits without a value:
http://ericleads.com/h5validate/?name=
Your recourse:
$(‘#myForm’).submit(functi
return $(‘#myForm’).h5Validate(‘a
Vinny
Sorry I forgot to look.
So I uploaded the files to my own server - you cannot run the js file in IE from github due to mime mismatch so copy the js files and css to your server
http://plungjan.name/ee/h5validate.html
Works natively in IE10
I do not have IE9
Try now?
http://plungjan.name/ee/h5validate.html
Works natively in IE10
I do not have IE9
Try now?
ASKER
mplungjan,
http://plungjan.name/ee/h5validate.html still posts when submit is clicked and the field is empty.
VincentPuglia,
I assume I would put
$(‘#myForm’).submit(functi
return $(‘#myForm’).h5Validate(‘a
between script tags in the head section and refer an onclick event in the submit button to it. Is that correct?
http://plungjan.name/ee/h5validate.html still posts when submit is clicked and the field is empty.
VincentPuglia,
I assume I would put
$(‘#myForm’).submit(functi
return $(‘#myForm’).h5Validate(‘a
between script tags in the head section and refer an onclick event in the submit button to it. Is that correct?
Hi,
Sorry to say I don't play with 3rd party libs. I binged a query & found the above, so I do not know exactly.
However, without all the gibberish (#$), it does look like a normal function script. So, I'd say it should work.
Vinny
Sorry to say I don't play with 3rd party libs. I binged a query & found the above, so I do not know exactly.
However, without all the gibberish (#$), it does look like a normal function script. So, I'd say it should work.
Vinny
Either the html5 required works (and it does in Chrome Fx and IE10) or the code should MAKE it work and it does not it seems.
I can try on Monday in IE8, if it can be made to work there it should work in IE9 too
I can try on Monday in IE8, if it can be made to work there it should work in IE9 too
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.