In Part One we saw that the XSP.attachValidator function threw a javascript error, and that adding a required validator does not allow you to customise the message. However, with a little bit of scripting it is still possible to use XSP.attachValidator.

Option Two: Add Scripted Validators

First, a couple of basics. Whereas the required validator uses server-side javascript, XSP.attachValidator uses client-side javascript functions in xspClientDojo.js. You will find this as part of your installation in dominojsdojo-1.1.1ibmxspwidgetlayout. For more information on client dojo, see the Domino Designer wiki, which also taught me the techniques I use here to extend the functions.

So our XPage has a normal radioGroup, listBox and checkBoxGroup, without validators. To force client-side validation we add a script block:

 <xp:scriptBlockid=“scriptBlock1”

>

 

<xp:this.value>var convertInput = function() {

XSP.attachValidator(“#{id:listBox1}”, new XSP.RequiredValidator(“You must complete the listBox”));

 

XSP.attachValidator(“#{id:radioGroup1}”, new XSP.RequiredCheckValidator(“You must complete the radio button”));

 

XSP.attachValidator(“#{id:checkBoxGroup1}”, new XSP.RequiredCheckValidator(“You must complete the checkbox”));

 

};

 

XSP.addOnLoad(convertInput);

 

]]>xp:this.value

 

>

 

 

xp:scriptBlock

 

>

 

 

In xspClientDojo.js you’ll find a validationError function as below:

In xspClientDojo.js you’ll find a validationError function as below:

validationError function

You’ll notice the e.select() line, which was causing the problems with the required validators. However, you do not need to modify xspClientDojo.js. Instead, copy the code, create a new (client-side) Javascript Library and paste the code in, changing “this.validationError” to “XSP.validationError”. Your amended function will override the function in xspClientDojo for any page the script library is added to.

This will solve the problem for the listBox, but if you try it, the radioGroup and checkBoxGroup will always fail validation, even when a value is selected. A quick look at the HTML produced for the XPage explains why:

radio HTML

The id is assigned to an HTML table, not to the input control, so the value for the element is undefined. Instead view:_id1:radioGroup is assigned to the name attribute of the element. The same happens for the checkBoxGroup. Note, even if you add an id to each selectItem, it is not rendered to the HTML. So we need a separate validator for radioGroups and checkBoxGroups, and you’ll notice in my source code for the XPage I’ve called it XSP.RequiredCheckValidator. This is similar to the RequiredValidator function you can find in xspClientDojo.js, but with a few amendments to use dojo.query to get the input elements by name and loop through the array for a value.

XSP.RequiredCheckValidator = function RequiredValidator(message){

this.message = message;

this.validate = function xrv_v(clientId,value){

//radio buttons & checkbox return undefined as value because id is ascribed to HTML table element

//So do a dojo query returning an array of all inputs with name=clientId

var elements = dojo.query(“input[name=” + clientId + “]”);

var output = “”;

//Loop through the array and get the first selected value. For validation we just need to confirm

//one value was selected

for (i=0; i < elements.length; i++) {if (elements[i].checked) {output = elements[i].value; break;}}

if (output==””) {

XSP.validationError(clientId,this.message);

return false;

}

return true;

}

}

This now validates the listBox, radioGroup and checkBoxGroup using client-side javascript. A sample application with all the code for the first two tutorials is attached. Next time we’ll conclude with the server-side validation option I finally used.

 

2 thoughts on “XPages: Validation for Radio Buttons, Check Boxes and List Boxes: Part Two”

  1. Great way of doing this!

    I am trying to do something slightly different – that is, I have 5 separate fields, 1 of which MUST be completed, but there can be more than 1 completed. I’m thinking I could leverage your method to do this (hopefully).

    I would be really interested to see the server-side validation option you finally used, as I’m trying to keep to server-side validation for this app. Could you possibly post that solution or advise me where I could find it?

    Thanks so much!

  2. @Lenni, thanks for your comments. I’m working on the final part at the moment, so hope to have it available in the next few days.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top