Question

I have a submit button whose enablement state depends on several other widgets’ state; and I can’t come up with a client side solution in Google Apps Script to do the validation.

For example, take three checkboxes. The submit button should be enabled iff (if-and-only-if) at least one checkbox is enabled.

I know I could do this with server side validation but there shouldn’t be any need for something this simple. Any suggestions? Thanks.

Answer 1

It perfectly possible to write client side handlers that depend on multiple widgets’ states, as you can just chain many validateX calls on a single handler. The problem here is just that clientHandlers cannot validate checkboxes state.

I have opened an issue regarding this problem, you may want to star it to keep track of updates and kind of vote for it:

Issue 2220: UiApp handler validateValue of checkbox

Anyway, it is possible to workaround this, and I’ll just to show you that it is possible to have handlers depending on multiple widgets value, but this code will be much simpler when issue 2220 is solved:

function doGet(e) {
  var app = UiApp.createApplication().setTitle('Checkbox Test');
  var panel = app.createVerticalPanel(),
      noChecked = app.createClientHandler(),
      button = app.createButton('Test').setEnabled(false);

  for( var i = 0; i < 3; ++i ) {
    var cb1 = app.createCheckBox('cb'+i),
        cb2 = app.createCheckBox('cb'+i).setVisible(false),
        tb = app.createTextBox().setValue('false').setVisible(false);
    cb1.addClickHandler(app.createClientHandler().forTargets(cb2).setValue(true).setVisible(true).forEventSource().setVisible(false).forTargets(tb).setText('true'));
    cb2.addClickHandler(app.createClientHandler().forTargets(cb1).setValue(false).setVisible(true).forEventSource().setVisible(false).forTargets(tb).setText('false'));
    cb1.addClickHandler(app.createClientHandler().forTargets(button).setEnabled(true));
    cb2.addClickHandler(noChecked.validateMatches(tb,'false'));
    panel.add(cb1).add(cb2).add(tb);
  }
  noChecked.forTargets(button).setEnabled(false);  

  return app.add(panel.add(button));
}