I'm trying to do client side validation on form controls that are being dynamically added using the LiveValidation javascript library.
It works fine when the controls and the validation code are there from the start, but not for controls that have been dynamically added.
Static controls and validation (works fine)
<!-- the container where the dynamic javascript code manipulates -->
<div id = "FileUploadContainer">
<!--FileUpload Controls will be added here -->
<input id="file0" name = "file" type="file" class ="size4"/>
<script type="text/javascript">
var file0 = new LiveValidation('file0', { wait: 500 });
file0.add(Validate.Presence, { failureMessage: "File is required." });
</script>
<input id="textbox0" name = "txtShotNo" type="text" placeholder="Shot #" class="size1"/>
<script type="text/javascript">
var textbox0 = new LiveValidation('textbox0', { wait: 500 });
textbox0.add(Validate.Presence, { failureMessage: "Shot number is required." });
textbox0.add(Validate.Numericality, { onlyInteger: true, minimum: 1, maximum: 10000 });
</script>
</div>
Dynamically added controls and validation (doesn't work)
<script type = "text/javascript">
var counter = 1;
function AddFileUpload() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file" type="file" class="size4" />' +
'<script type="text/javascript">' +
' var file' + counter + ' = new LiveValidation(\'file' + counter + '\', { wait: 500 });' +
' file' + counter + '.add(Validate.Presence, { failureMessage: "File is required." });' +
'<\/script>' +
'<input id="textbox' + counter + '" name = "txtShotNo" type="textbox" placeholder="Shot #" class="size1" />' +
'<script type="text/javascript">' +
' var textbox' + counter + ' = new LiveValidation(\'textbox' + counter + '\', { wait: 500 });' +
' textbox' + counter + '.add(Validate.Presence, { failureMessage: "Shot number is required." });' +
' textbox' + counter + '.add(Validate.Numericality, { onlyInteger: true, minimum: 1, maximum: 10000 });' +
'<\/script>' +
'<input id="Button' + counter + '" type="button" value="Remove" onclick = "RemoveFileUpload(this)" class="primary" />';
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
function RemoveFileUpload(div) {
document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}
</script>
Anyone have some pointers on how I can get validation to work for the dynamically added controls?
