Output validation errors as list

Code snippet 1 - validation.js

/**
 * Change the method of displaying errors from alert box to 
 * output to an unordered list (<ul>).
 * @param btnSubmit id of a button that submits a form
 * @param ulId id of a ul where errors will be displayed
 */
function errorOutputUL(btnSubmit, ulId) {
	// enable validation of all fields
	XSP.validateAllFields = true;
	// change the function that displays an error  
	XSP.validationError = function(clientId, message) {
		// add class to ul
	    dojo.addClass(ulId, "xspMessage");
	    // add li with a message
	    dojo.byId(ulId).innerHTML = dojo.byId(ulId).innerHTML + "<li>" + message + "</li>"; 
	};
	// clear old errors on submit 
	dojo.connect(dojo.byId(btnSubmit), "onclick", null, function() {
		dojo.byId(ulId).innerHTML = "";
		dojo.removeClass(ulId, "xspMessage");
	});
}




Code snippet 2 - XPage

  <xp:this.resources>
    <xp:script src="/validation.js" clientSide="true" />
  </xp:this.resources>

  <xp:table>

...
fields to validate
...

    <xp:tr>
      <xp:td></xp:td>
      <xp:td>
        <xp:messages style="color:red" id="messages1"></xp:messages>
        <ul id="errors" style="color:red"></ul>
      </xp:td>
    </xp:tr>
    <xp:tr>
      <xp:td></xp:td>
      <xp:td>
        <xp:button value="Submit" id="btnSubmit">
          <xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true" id="eventHandler1" />
        </xp:button>
      </xp:td>
    </xp:tr>
  </xp:table>

  <xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[dojo.ready(function() {
	errorOutputUL("#{id:btnSubmit}", "errors");
});
]]></xp:this.value>
  </xp:scriptBlock>