GAS Client Handler Validation on List Boxes - google-apps-script

Question

I am coding a simple UI web form in GAS. I have several text boxes and list boxes. I have added client handlers to validate the input on the text boxes on blur and they all work fine. However, when I try to use the client handler on a list box it doesn't work. For example, the first item in the list box is an empty string and I want to check that an item has been picked. Whatever validation option I use, it fires. I've tried validate length. I thought perhaps the script might be picking up the index value of the list so I tried option and range. Also, a no-go. I would guess the script is working with a null value which is short-circuiting any validation. Any tips? When the widget is a List Box this thing fires all the time regardless of the conditions.
var required_field = app.createClientHandler()
.validateNotLength(widget, min, max)
.forTargets(lblInfo)
.setStyleAttribute('color','red')
.setText('Please correct errors in red NOW.')
.forTargets(lbl)
.setStyleAttribute('color','red')
.forTargets(widget)
.setStyleAttribute('background', '#ffe7e7');
widget.addBlurHandler(required_field);

Answer 1

I was interested in this issue so I ran a couple of tests and ended up with a workaround that might be interesting. The code is a bit long but I didn't find any way to make it shorter and still clear ;-)
This version is working, there are a few comments to suggest how to make it 'transparent' and also how to demonstrate that the handlers validation doesn't work on listBoxes.
Tell me what you think ;-)
EDIT : I've put a version online for a quick test.
function showtest() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
var app = UiApp.createApplication().setTitle('ListBox Clienthandler test');
var panel = app.createVerticalPanel();
var lb = app.createListBox(false).setId('myId').setName('myLbName').setWidth(350);
var former = app.createTextBox().setName('former value').setId('former').setWidth(350);
var textbox = app.createTextBox().setName('text').setId('valtext').setWidth(350)//.setVisible(false);// set it visible to test how it works, invisible to use it 'transparently'
var label = app.createHTML("<BR><BR>Use this textBox as a button, click on it to update its value,<BR>the Client handler doesn't fire when selected color = white<BR>(if you set the upper textBox invisible then it works as if the<BR>listBox had the handler)<BR><BR>")
// add items to ListBox
lb.setVisibleItemCount(7);
lb.addItem('white');
lb.addItem('pink');
lb.addItem('orange');
lb.addItem('green');
lb.addItem('yellow');
lb.addItem('red');
lb.addItem('cyan');
//
panel.add(textbox);
panel.add(lb);
panel.add(label);
panel.add(former);
var handler = app.createServerClickHandler('click').addCallbackElement(panel);
lb.addClickHandler(handler);
app.add(panel);
doc.show(app);
}
//
function click(e) {
var app = UiApp.getActiveApplication();
var value = e.parameter.myLbName
if(value==''){value='white'}
var textboxvalue = e.parameter.text
if(textboxvalue==''){textboxvalue='none'}
var text=app.getElementById('valtext')
text.setText(value)
var lb=app.getElementById('myId')
var former=app.getElementById('former')
// var handlerval = app.createClientHandler().validateNotMatches(lb, 'white') // this line puts handler on listBox and doesn't work
var handlerval = app.createClientHandler().validateNotMatches(text, 'white') // this line puts handler on TextBox and works as expected
.forEventSource().setText("Click here for Former Value = "+textboxvalue+" / present value = "+value)
.forTargets(lb).setStyleAttribute("background", value)
former.addClickHandler(handlerval);
return app;
}
EDIT 2 :
here is another possibility to simulate (almost exactly) the function you need : (online version)
function showtest() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
var app = UiApp.createApplication().setTitle('ListBox Clienthandler test');
var panel = app.createVerticalPanel();
var lb = app.createListBox(false).setId('lb').setName('lb').setWidth(350);
var label = app.createHTML("<BR>You forgot to choose a value in the list").setVisible(false).setId('label');
lb.setVisibleItemCount(7);
lb.addItem('');
lb.addItem('pink');
lb.addItem('orange');
lb.addItem('green');
lb.addItem('yellow');
lb.addItem('red');
lb.addItem('cyan');
var othertextbox = app.createTextBox().setText('other question');
var grid = app.createGrid(4,1)
grid.setWidget(0, 0, lb)
grid.setWidget(1, 0, label)
grid.setWidget(3, 0, othertextbox)
panel.add(grid)
var handler = app.createServerBlurHandler('alert').addCallbackElement(panel);
lb.addBlurHandler(handler);
app.add(panel);
doc.show(app);
}
//
function alert(e) {
var app = UiApp.getActiveApplication();
var lb = app.getElementById('lb')
var label = app.getElementById('label')
var value = e.parameter.lb
if(value==''){
lb.setStyleAttribute("background", 'red');
label.setVisible(true)
}else{
lb.setStyleAttribute("background", 'white');
label.setVisible(false)
}
return app;

Answer 2

Client handlers dont work with ListBox. But don't forget that you always have an option with Server handlers which are applicable in most of the cases when you can 1-2 seconds lag in reaction