Google apps script ui enable button only when all values in grid are int

Question

I have a Google Apps Script application written using the UI service (not the HTML service), and the app is embedded in a Google Site.

I have a grid of 15 values (3x5). I am able to use a clientHandler to validate that the the values in each textBox are integers.

I want to ensure that all 15 of the values are correctly set before enabling the Submit button.

What is the best way to do this?

Obviously, just toggling the the button .setEnabled property onChange is no good, as if one widget disables the button, but the next is a valid integer, it would re-enable the button.

I thought about using a serverHandler, but figured that could be slow and unreliable. I'd like to keep it client side if I can. It feels like it should be possible, but I just can't work it out. What am I missing?

All advice welcomed. Thanks.

Answer 1

This will enable submit once all fields are integers, but it'll need more added to it to handle cases where the values could get changed back to non-integer after first passing the validation.

function doGet() {
  var app = UiApp.createApplication();
  var field1 = app.createTextBox();
  var field2 = app.createTextBox();
  var field3 = app.createTextBox();
  var submit = app.createButton('SUBMIT').setEnabled(false);

  var handler = app.createClientHandler().validateInteger(field1)
  .validateInteger(field2).validateInteger(field3)
  .forTargets(submit).setEnabled(true);

  field1.addValueChangeHandler(handler);
  field2.addValueChangeHandler(handler);
  field3.addValueChangeHandler(handler);

  app.add(field1).add(field2).add(field3).add(submit);
  return app;
}

Deployed app.

Corey's UiApp posts are helpful in this area.