Custom Validation Function - google-apps-script

Question

I'm trying to understand how handlers work with validation in Google's UI Service.
If I have a text box with a button and I only want to contact the server if the text box is 1) Not Empty and 2) Contains a specific value, for e.g. 'Fred' how do I create a validation function that checks if the value is 'Fred' before allowing the serverhandler to fire?
Some example code:
function myValid() {
//create the app
var app = UiApp.createApplication();
//set out UI in table
var flex = app.createFlexTable()
.setWidget(0, 0, app.createTextBox().setName('textbox').setId('textbox'))
.setWidget(0, 1, app.createButton('Submit').setId('submit'))
.setWidget(0, 2, app.createLabel().setId('status'));
//server handler - fires only if textbox isn't empty
var serverHandler = app.createServerHandler('submit')
.validateLength(app.getElementById('textbox'), 1, null)
.addCallbackElement(flex);
//my custom handler to check the value of the textbox
var myserverHandler = app.createServerHandler('myCheck')
.addCallbackElement(flex);
//client handler to display a message if textbox is empty
var clientHandler = app.createClientHandler()
.validateNotLength(app.getElementById('textbox'), 1, null)
.forTargets(app.getElementById('status'))
.setText('Cannot be empty');
//add the handlers to the submit button
app.getElementById('submit')
.addClickHandler(serverHandler)
.addClickHandler(myserverHandler)
.addClickHandler(clientHandler);
//add table to UI
app.add(flex);
//show app in the current spreadsheet
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
//check to see if textbox value is 'Fred'. If not display error
function myCheck(e) {
var app = UiApp.getActiveApplication();
if (e.parameter.textbox != "Fred")
var errorLabel = app.createLabel("Incorrect Value");
app.add(errorLabel);
return app;
}
//If all validation passes then display message
function submit(e) {
var app = UiApp.getActiveApplication();
app.getElementById('status').setText('Server handler fired');
return app;
}
I have attempted to use a serverhandler to check the textbox value but a clienthandler would be better. How do I write a custom client handler to check the textbox value for 'Fred'? Also, how do I prevent the serverhandler firing before all my validation conditions are met?
Thanks

Answer 1

The solution is simpler than your code, one server handler is enough with a single validation on "Fred" and a ClientHandler using validateNotMatches.
Code below.
function myValid() {
var app = UiApp.createApplication();
var textBox = app.createTextBox().setName('textbox').setId('textbox');
var btn = app.createButton('Submit');
var label = app.createLabel().setId('status');
var flex = app.createFlexTable()
.setWidget(0, 0, textBox)
.setWidget(0, 1, btn)
.setWidget(0, 2, label);
var serverHandler = app.createServerHandler('submit')
.validateMatches(textBox, 'Fred')
.addCallbackElement(flex);
var clientHandler = app.createClientHandler()
.validateNotMatches(textBox, 'Fred').forTargets(label).setText('Missing or invalid value');
btn.addClickHandler(serverHandler).addClickHandler(clientHandler);
app.add(flex);
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function submit(e) {
var app = UiApp.getActiveApplication();
app.getElementById('status').setText('Server handler fired');
return app;
}
This code accepts any answer "containing" Fred, if you want it to reject anything but "Fred" alone just add a validation on the textBox length == 4 (validateLength,textBox,4,4), I wasn't sure what you really wanted...
Edit : Thanks for accepting, this edit just to mention there is also another approach that might interest you using btn.setEnabled() and a KeyUpHandler, code below... the choice is yours ;-)
function myValid() {
var app = UiApp.createApplication();
var textBox = app.createTextBox().setName('textbox').setId('textbox');
var btn = app.createButton('Submit').setEnabled(false);
var label = app.createLabel().setId('status');
var flex = app.createFlexTable()
.setWidget(0, 0, textBox)
.setWidget(0, 1, btn)
.setWidget(0, 2, label);
var serverHandler = app.createServerHandler('submit')
.validateMatches(textBox, 'Fred')
.addCallbackElement(flex);
btn.addClickHandler(serverHandler);
var btnHandler = app.createClientHandler().validateMatches(textBox,'Fred').forTargets(btn).setEnabled(true);
textBox.addKeyUpHandler(btnHandler);
app.add(flex);
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
spreadsheet.show(app);
}
function submit(e) {
var app = UiApp.getActiveApplication();
app.getElementById('status').setText('Server handler fired');
return app;
}