I have a form in which I am generating dynamic fields. I can do this
fine, but when I go to validate them there are errors. The non-
dynamic fields validate correctly. Below is the html and js. Can
someone explain why the dynamic field is failing, and what I can do to
correct it? I can tell as much that the validation fails when
testing: "if (!elem.firstChild)"
<html>
<head>
<script type="text/javascript" src="dynamicFields.js"></script>
<script type="text/javascript" src="validateScripts.js"></script>
<style>
.info { color: black; background-color: transparent; font-weight:
normal;}
.warn { color: rgb(120,0,0); background-color: transparent; font-
weight: bold;}
.error { color: red; background-color: transparent; font-weight:
bold;}
</style>
</head>
<body>
<input type=text name=number size=3 value=1>
<input type=button value="update" onClick="addField(number.value);">
<br>
<table>
<tr>
<td>Below field will <b>NOT</bvalidate correctly</td>
</tr>
<tr>
<span id=fieldHolder style="position:relative;"></span>
</tr>
</table>
<table>
<tr>
<td>Below field will validate correctly</td><td></td>
</tr>
<tr>
<td><input type="text" id="works"
onchange="validate(this,'inf_works');"></td>
<td id="inf_works"> </td>
</tr>
</table>
</body>
</html>
======= validateScripts.js =======
var nbsp = 160;
var node_text = 3;
var emptyString = /^\s*$/ ;
function msg (fld, msgType, message)
{
var elem = document.getElementById(fld);
elem.firstChild.nodeValue = message;
elem.className = msgType;
}
function validate(valField,infoField)
{
var elem = document.getElementById(infoField);
alert('a');
if (!elem.firstChild) return true;
alert('b');
if (elem.firstChild.nodeType != node_text) return true;
alert('c');
valField.value = valField.value.toUpperCase();
if (emptyString.test(valField.value))
{
msg(infoField,"error","No Data?");
return false;
}
else
{
msg(infoField,"warn","WARN: some data changed");
}
return true;
}
======dynamicFields.js ======
function addField(number)
{
var data;
data = '<td><input type="text" id="notWork" onChange="validate(this,
\'inf_notWork\');"></td>';
data = data + '<td id="inf_notWork"> </td>';
fieldHolder.innerHTML = data;
}
