[thelist] Javascript broken in IE

Jon Hughes hughesj at firemtn.com
Fri Jun 29 17:37:22 CDT 2007


JS:
<script type="text/javascript">
//* Thank you to Jeremy Keith for this technique *//
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if(parent.lastchild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
function pzvalid(form) {
var inputs = form.getElementsByTagName("input");
for ( var i=0; i < inputs.length; i++) {
var title = inputs[i].title
var value = inputs[i].value
if ( title.indexOf("Required") > -1 && value == "" &&
inputs[i].style.backgroundColor != "rgb(255, 236, 204)") {
inputs[i].style.border = "#ffa200 solid 1px";
inputs[i].style.backgroundColor = "rgb(255, 236, 204)";
var sid = inputs[i].id;
var fid = "l" + sid;
var label = document.getElementById(fid);
var elem = document.getElementById(sid);
var msg = elem.title;
var message = document.createElement("strong");
message.style.display = "inline";
var msgtext = document.createTextNode(msg);
message.appendChild(msgtext);
insertAfter(message,label);
 }
 else if (title.indexOf("Required") > -1 && value != "" &&
inputs[i].style.backgroundColor == "rgb(255, 236, 204)") {
	inputs[i].style.border = "#ffa200 solid 1px";
	inputs[i].style.backgroundColor = "rgb(255, 255, 255)";
	inputs[i].previousSibling.previousSibling.style.display =
"none";
 }
}
}
</script>



HTML:
<form action="formtest.html" method="post" onsubmit="pzvalid(this);
return false;">
<fieldset>
<label for="fname" id="lfname">First Name:</label>
<input type="text" name="fname" id="fname" title="Please input your
First Name (Required)" />
<label for="mname" id="lmname">Middle Name:</label>
<input type="text" name="mname" id="mname" title="Please input your
Middle Name (Optional)" />
<label for="lname" id="llname">Last Name:</label>
<input type="text" name="lname" id="lname" title="Please input your Last
Name (Required)" />
<input name="submit" type="submit" value="submit" />
</fieldset>
</form>

Overview:
The reason I made this script was I didn't like how every other form
validator I found required you to have weird classes or hidden spans in
the HTML. This way, it uses the title tag of the input tag to generate
the error message if you don't input a required field (determined by
putting a (required) in the title.

This works (as far as I can tell) perfectly fine in FF, but IE 7 doesn't
hide the error message after you submit the form again with the field
filled in.

NOTE: I am very new to JS, and would love constructive critisiism or
ideas to improve the script, but please be gentle.

Thank You,
- Jon Hughes 




More information about the thelist mailing list