continuum-webapp/src/main/resources/template/default/validation.vm

<script>
var xmlhttp=false;

/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

function validate(e) {
    // mark the element as touch
    e.touched = true;
    xmlhttp.open("POST", "/validation", true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            var xml = xmlhttp.responseXML;
            clearErrorRows(e.parentNode.parentNode.parentNode);
            clearErrorLabels(e.form);
            var errors = xml.childNodes[0].getElementsByTagName("e");
            for (var i = 0; i < errors.length; i++) {
                var error = errors[i];
                var errorName = error.getAttribute("n");
                var errorText = error.childNodes[0].textContent;
                // there was an error, report it
                var element = e.form.elements[errorName];
                if (element != null && element.touched && element.touched == true) {
                    addError(element, errorText);
                }
            }
        }
    }

    var req = getValidateXml(e.form);
    xmlhttp.send(req);
}

function clearErrorRows(table) {
    // clear out any rows with an "errorFor" attribute
    var rows = table.rows;
    var rowsToDelete = new Array();
    for(var i = 0; i < rows.length; i++) {
        var r = rows[i];
        if (r.getAttribute("errorFor")) {
            rowsToDelete.push(r);
        }
    }

    // now delete the rows
    for (var i = 0; i < rowsToDelete.length; i++) {
        var r = rowsToDelete[i];
        table.deleteRow(r.rowIndex);
    }
}

function clearErrorLabels(form) {
    // set all labels back to the normal class
    var elements = form.elements;
    for (var i = 0; i < elements.length; i++) {
        var e = elements[i];
        var cells = e.parentNode.parentNode.cells;
        if (cells && cells.length >= 2) {
            var label = cells[0].getElementsByTagName("label")[0];
            if (label) {
                label.setAttribute("class", "label");
            }
        }
    }

}

function getValidateXml(f) {
    var actionName = f.name;
    var namespace = f.getAttribute("namespace");
    var xml = '<r a="' + actionName + '" ns="' + namespace +'">\n';
    for (var i = 0; i < f.elements.length; i++) {
        var e = f.elements[i];
        xml = xml + '<p n="' + e.name + '">' + e.value + '</p>\n';
    }
    xml = xml + '</r>\n';
    return xml;
}

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.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");
    } catch (e) {
        alert(e);
    }
}
</script>