Using client side pure javascript field validation results in [Object Error] alert box in IE and "TypeError: label has no properties" alert box in FF.
<s:form action="authenticate" validate="true">
<s:textfield key="login.name" name="name" value="%
{name}
" tabindex="1" labelposition="top"/>
<s:password key="login.password" name="password" tabindex="2" labelposition="top"/>
<s:submit type="image" src="images/goButton.gif" tabindex="3"/>
</s:form>
I've isolated the error to the following method in validation.js:
function addError(e, errorText) {
try
{
// clear out any rows with an "errorFor" of e.id
var row = e.parentNode.parentNode;
var table = row.parentNode;
var error = document.createTextNode(errorText);
var tr = document.createElement("tr");
var td = document.createElement("td");
var span = document.createElement("span");
td.align = "center";
td.valign = "top";
td.colSpan = 2;
span.setAttribute("class", "errorMessage");
span.setAttribute("className", "errorMessage"); //ie hack cause ie does not support setAttribute
span.appendChild(error);
td.appendChild(span);
tr.appendChild(td);
tr.setAttribute("errorFor", e.id);;
table.insertBefore(tr, row);
// updat the label too
var label = row.cells[0].getElementsByTagName("label")[0];
label.setAttribute("class", "errorLabel");
label.setAttribute("className", "errorLabel"); //ie hack cause ie does not support setAttribute
}
catch (e)
{
alert(e);
}
}
I've worked around it by comparing 'label' to null.