google-apps-script - 列表框上的 GAS 客户端处理程序验证

Question

我正在 GAS 中编写一个简单的 UI Web 表单。我有几个文本框和列表框。我添加了客户端处理程序来验证模糊文本框中的输入，它们都工作正常。但是，当我尝试在列表框中使用客户端处理程序时，它不起作用。例如，列表框中的第一项是空字符串，我想检查是否已选择某个项目。无论我使用什么验证选项，它都会触发。我试过验证长度。我认为脚本可能会获取列表的索引值，因此我尝试了选项和范围。还有，不准去。我猜想该脚本正在使用空值，这会短路任何验证。有小费吗？当小部件是列表框时，无论条件如何，这个东西都会一直触发。

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

我对这个问题很感兴趣，所以我进行了一些测试，最终得到了一个可能有趣的解决方法。代码有点长，但我没有找到任何方法使其更短且仍然清晰;-)

此版本正在运行，有一些评论建议如何使其“透明”，以及如何证明处理程序验证不适用于列表框。

告诉我你的想法;-)

编辑:我已经输入了 version online进行快速测试。

 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;
 }

编辑2:

这是另一种模拟(几乎完全)您需要的功能的可能性:( 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;