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:script src="/validation.js" clientSide="true" />


fields to validate

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

  <xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[dojo.ready(function() {
	errorOutputUL("#{id:btnSubmit}", "errors");
All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.
No comments yetLogin first to comment...