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>