Google Apps Script validation issue in Google UiApp

I have been trying to figure out Google Apps Script validation in Google Sites and have yet to make the validation part work correctly.

I need to validate 2 things:

1. That there is at least 5 characters in the “location” textbox (up to 100)
2. That a date has been selected from the dropdown

If both conditions are not met, then it should make visible 2 things:

1. warnException
2. warnExceptionMes

That’s it.

The rest of my logic is working great. I am just starting out.

The full logic is listed below. I have replaced our domain info with xxxxxxxxx.

So far, it either never shows the messages and does nothing or just getting one of the items right allows it to move forward. They should both meet the requirements or the warnExceptions should be thrown. This would also be the same if a user loaded the page and did not fill either/or area out and just pushed the button.

How can I validate the Location textbox and the dateBox?

var templateIDToCopy = 'xxxxxxxxxx';
var folderIDtoCopyTo = 'xxxxxxxxxx';
var councilMembers = ['Unknown','Name 1','Name 2'];

function doGet(e) {
  var text= new Array();
  var app = UiApp.createApplication();
  var hpanel = app.createGrid(4, 6).setId('pannel');
  var hpanelException = app.createGrid(2,3).setId('hpanelException');
  var location = app.createTextBox().setName('location').setId("location").setWidth('200');
  var minuteTaker = app.createListBox().setName('minuteTaker').setId("minuteTaker").setWidth('200')
   for (var i = 0 ; i < councilMembers.length; i++) {
    minuteTaker.addItem(councilMembers.valueOf()[i]);
                    }
  
  var dateBox = app.createDateBox().setId('dateBox').setName('dateBox').setFireEventsForInvalid(false);
  var hour = app.createListBox(false).setId('hour').setName('hour')
//  var hour = app.createListBox(false).setId('hour').setName('hour')
  for(h=1;h<13;++h){hour.addItem(h)}
  var min = app.createListBox(false).setId('minute').setName('minute')
  .addItem('00').addItem('15').addItem('30').addItem('45'); 
  var amPm = app.createListBox(false).setId('am').setName('amPm')
  .addItem('AM').addItem('PM');  
  var dateTimeLabel = app.createLabel('',false).setId('dateTimeLabel');
  var submit = app.createButton('Create Minutes').setId('submit').setPixelSize(196, 25);
  var nextSteps = app.createAnchor('Please click here to see the minutes archive.', 'https://drive.google.com/xxxxxxxxxx/folderview?xxxxxxxxxx').setId('nextSteps').setVisible(false);
   
// Setup error message 
  var warnException =app.createImage('https://sites.google.com/xxxxxxxxxx/minutes/create-new-minutes/Opps.png').setId('warnException').setVisible(false);
  var warnExceptionMes = app.createLabel('The date and Location are required. Please try again.').setStyleAttribute('font-weight', 'normal').setStyleAttribute('font-size','14px').setVisible(false);

// handlers
  var handler1 = app.createClientHandler()
  .validateLength(location, 0, 50).validateMatches(dateBox, '2', 'g')
  .forTargets(warnException).setVisible(true)
  .forTargets(warnExceptionMes).setVisible(true);
 
  var handler2 = app.createServerHandler('handlerFunction')
  .validateLength(location, 1, 100).validateNotMatches(dateBox, '2', 'g')
  .addCallbackElement(location).addCallbackElement(dateBox).addCallbackElement(hpanel);
   
  submit.addClickHandler(handler1).addClickHandler(handler2);
   
  hpanel.setWidget(0,0,app.createLabel('Select Date'))
   .setWidget(0,1,app.createLabel('Hour'))
   .setWidget(0,2,app.createLabel('Minutes'))
   .setWidget(0,3,app.createLabel('AM/PM'))
   .setWidget(0,4,app.createLabel('Location'))
   .setWidget(0,5,app.createLabel('Minute Taker'))
   
  hpanel.setWidget(1,0,dateBox)
   .setWidget(1,1,hour)
   .setWidget(1,2,min)
   .setWidget(1,3,amPm)
   .setWidget(1,4,location)
   .setWidget(1,5,minuteTaker)
  
   hpanel.setWidget(2,5,submit)
   app.add(hpanel);//.add(warnException).add(warnExceptionMes);
  
  hpanelException.setWidget(1,1,warnException).setStyleAttribute("text-align", "right")
   .setWidget(1,2,warnExceptionMes)
  // .setWidget(1,2,nextSteps)
   app.add(hpanelException);
   return app;
     }


function handlerFunction(e) {
 var app = UiApp.getActiveApplication();
 app.getElementById('submit').setText('Building, please wait...').setEnabled(false);
   
  var location = e.parameter.location; 
  var determineName = e.parameter.minuteTaker;  
  var date = e.parameter.dateBox;
  var timeZone = date.toString().substr(25,6)+":00";  
  var dateMilli = date.getTime();  
  var hour = parseInt(e.parameter.hour);  
  var amPm = e.parameter.amPm;
  if (amPm == 'PM' && hour != 12) hour = hour + 12;  
  if (hour == 12 && amPm == 'AM') hour = 0;  
  var hourMilli = hour * 3600000;  
  var minMilli = parseInt(e.parameter.minute) * 60000;  
  var milliTotal = dateMilli + hourMilli + minMilli; 

  // create custom format
  var newDate = Utilities.formatDate(new Date(milliTotal), timeZone, 'MM/dd/yy hh:mm aaa');
  app.getElementById('dateTimeLabel').setText(newDate);

  // make a copy of the minutes template to use
  var duplicateID = DriveApp.getFileById(templateIDToCopy)
  .makeCopy('Simply Minutes v1.0 - Stage 1: Building new minutes...')
 .getId();

// get the id of the annual folder where minutes will be stored
  var getFolderID = DriveApp.getFolderById(folderIDtoCopyTo);

// copy new minutes sheet to the annual folder where minutes are stored
  var moveIT = DriveApp.getFileById(duplicateID).makeCopy('Simply Minutes v1.0 - Stage 2: Building new minutes...', getFolderID).getId();

// get the new minutes doc that was created
  var template = DocumentApp.openById(moveIT);
  var templateHeader = template.getHeader();
  var templateBody = template.getActiveSection();

// fill in the values
  templateHeader.replaceText("<date>", newDate);
  templateBody.replaceText("<date>", newDate);
  templateHeader.replaceText("<location>", location);
  templateBody.replaceText("<location>", 'N/A');
  var email = Session.getEffectiveUser().getEmail();
  var eUser = Session.getEffectiveUser().getUsername();
  var createdBy = '';
  
  if(ContactsApp.getContact(email)){     
     var fullName = ContactsApp.getContact(email).getFullName();
     createdBy = fullName;
  }
  else {
     createdBy = 'N/A';
  };
  
  var determineName = e.parameter.minuteTaker;
  templateHeader.replaceText("<minutetaker>", determineName);
  templateHeader.replaceText("<createdby>", createdBy)
  templateBody.replaceText("<minutetaker>", determineName);
  templateBody.replaceText("<createdby>", createdBy); 
  template.setName(newDate + ' TAC Minutes Recorded By ' + determineName);
  
// close out the doc
  template.saveAndClose();
  
  
  // remove the copy that was left in the root directory
 
 //  DriveApp.getFileById(duplicateID).isTrashed();
   DriveApp.getFileById(duplicateID).setTrashed(true);
  
  app = UiApp.getActiveApplication();
  app.getElementById('submit').setText('Completed!').setEnabled(false);
  app.getElementById('nextSteps').setVisible(true);
  return app;
    }
 

Answer

Try like this (see below) I changed a bit the validations and separated in 2 handlers + added a “clear” handler to be able to click-to-delete the warnings… test code here

You have also to add something to clear the warnings in the server handler and, why not combine the image and text warning in a single widget ? (easier to clean)

code below :

function doGet(e) {
  var text= new Array();
  var app = UiApp.createApplication();
  var hpanel = app.createGrid(4, 6).setId('pannel');
  var clearHandler = app.createClientHandler().forEventSource().setVisible(false)
  var hpanelException = app.createGrid(2,3).setId('hpanelException');
  var location = app.createTextBox().setName('location').setId("location").setWidth('200');
  var minuteTaker = app.createListBox().setName('minuteTaker').setId("minuteTaker").setWidth('200')
   for (var i = 0 ; i < councilMembers.length; i++) {
    minuteTaker.addItem(councilMembers.valueOf()[i]);
                    }

  var dateBox = app.createDateBox().setId('dateBox').setName('dateBox').setFireEventsForInvalid(false);
  var hour = app.createListBox(false).setId('hour').setName('hour')
//  var hour = app.createListBox(false).setId('hour').setName('hour')
  for(h=1;h<13;++h){hour.addItem(h)}
  var min = app.createListBox(false).setId('minute').setName('minute')
  .addItem('00').addItem('15').addItem('30').addItem('45'); 
  var amPm = app.createListBox(false).setId('am').setName('amPm')
  .addItem('AM').addItem('PM');  
  var dateTimeLabel = app.createLabel('',false).setId('dateTimeLabel');
  var submit = app.createButton('Create Minutes').setId('submit').setPixelSize(196, 25);
  var nextSteps = app.createAnchor('Please click here to see the minutes archive.', 'https://drive.google.com/xxxxxxxxxx/folderview?xxxxxxxxxx').setId('nextSteps').setVisible(false);

// Setup error message 
  var warnException =app.createImage('https://sites.google.com/xxxxxxxxxx/minutes/create-new-minutes/Opps.png').setId('warnException').setVisible(false).addClickHandler(clearHandler);
  var warnExceptionMes = app.createLabel('The date and Location are required. Please try again.').setStyleAttribute('font-weight', 'normal').setStyleAttribute('font-size','14px').setVisible(false).addClickHandler(clearHandler);

// handlers
  var handler0 = app.createClientHandler()
  .validateLength(location, 0, 5)
  .forTargets(warnException).setVisible(true)
  .forTargets(warnExceptionMes).setVisible(true);
  var handler1 = app.createClientHandler()
  .validateNotMatches(dateBox, '2', 'g')
  .forTargets(warnException).setVisible(true)
  .forTargets(warnExceptionMes).setVisible(true);

  var handler2 = app.createServerHandler('handlerFunction')
  .validateLength(location, 6, 100).validateMatches(dateBox, '2', 'g')
  .addCallbackElement(location).addCallbackElement(dateBox).addCallbackElement(hpanel);

  submit.addClickHandler(handler0).addClickHandler(handler1).addClickHandler(handler2);

  hpanel.setWidget(0,0,app.createLabel('Select Date'))
   .setWidget(0,1,app.createLabel('Hour'))
   .setWidget(0,2,app.createLabel('Minutes'))
   .setWidget(0,3,app.createLabel('AM/PM'))
   .setWidget(0,4,app.createLabel('Location'))
   .setWidget(0,5,app.createLabel('Minute Taker'))

  hpanel.setWidget(1,0,dateBox)
   .setWidget(1,1,hour)
   .setWidget(1,2,min)
   .setWidget(1,3,amPm)
   .setWidget(1,4,location)
   .setWidget(1,5,minuteTaker)

   hpanel.setWidget(2,5,submit)
   app.add(hpanel);//.add(warnException).add(warnExceptionMes);

  hpanelException.setWidget(1,1,warnException).setStyleAttribute("text-align", "right")
   .setWidget(1,2,warnExceptionMes)
  // .setWidget(1,2,nextSteps)
   app.add(hpanelException);
   return app;
     }

---

EDIT second version following your comment. I simulated a server function that takes some time so you see all the steps. + I combined the warning as suggested. (demo code updated with version 2)

var templateIDToCopy = 'xxxxxxxxxx';
var folderIDtoCopyTo = 'xxxxxxxxxx';
var councilMembers = ['Unknown','Name 1','Name 2'];

function doGet(e) {
  var text= new Array();
  var app = UiApp.createApplication();
  var hpanel = app.createGrid(4, 6).setId('pannel');
  var hpanelException = app.createGrid(2,3).setId('hpanelException');
  var location = app.createTextBox().setName('location').setId("location").setWidth('200');
  var minuteTaker = app.createListBox().setName('minuteTaker').setId("minuteTaker").setWidth('200')
   for (var i = 0 ; i < councilMembers.length; i++) {
    minuteTaker.addItem(councilMembers.valueOf()[i]);
                    }

  var dateBox = app.createDateBox().setId('dateBox').setName('dateBox').setFireEventsForInvalid(false);
  var hour = app.createListBox(false).setId('hour').setName('hour')
//  var hour = app.createListBox(false).setId('hour').setName('hour')
  for(h=1;h<13;++h){hour.addItem(h)}
  var min = app.createListBox(false).setId('minute').setName('minute')
  .addItem('00').addItem('15').addItem('30').addItem('45'); 
  var amPm = app.createListBox(false).setId('am').setName('amPm')
  .addItem('AM').addItem('PM');  
  var dateTimeLabel = app.createLabel('',false).setId('dateTimeLabel');
  var submit = app.createButton('Create Minutes').setId('submit').setPixelSize(195, 65);
  var nextSteps = app.createAnchor('Please click here to see the minutes archive.', 'https://drive.google.com/xxxxxxxxxx/folderview?xxxxxxxxxx').setId('nextSteps').setVisible(false);

  var clearHandler = app.createClientHandler();

// Setup error message 
  var warnException =app.createImage('https://dl.dropboxusercontent.com/u/211279/clock_e0.gif').addClickHandler(clearHandler);
  var warnExceptionMes = app.createLabel('The date and Location are required. Please try again.').setStyleAttribute('font-weight', 'normal').setStyleAttribute('font-size','14px').addClickHandler(clearHandler);
  var warnPanel = app.createHorizontalPanel().add(warnException).add(warnExceptionMes).setId('warning').setVisible(false);

  clearHandler.forTargets(warnPanel).setVisible(false);
// handlers
  var handler0 = app.createClientHandler()
  .validateLength(location, 0, 5)
  .forTargets(warnPanel).setVisible(true)

  var handler1 = app.createClientHandler()
  .validateNotMatches(dateBox, '2', 'g')
  .forTargets(warnPanel).setVisible(true)

  var handler2 = app.createClientHandler()
  .validateLength(location, 6, 100).validateMatches(dateBox, '2', 'g')
  .forEventSource().setText('Server Handler is running...').setEnabled(false)
  .forTargets(warnPanel).setVisible(false);

  var handlerS = app.createServerHandler('handlerFunction')
  .validateLength(location, 6, 100).validateMatches(dateBox, '2', 'g')
  .addCallbackElement(location).addCallbackElement(dateBox).addCallbackElement(hpanel);

  submit.addClickHandler(handler0).addClickHandler(handler1).addClickHandler(handler2).addClickHandler(handlerS);

  hpanel.setWidget(0,0,app.createLabel('Select Date'))
   .setWidget(0,1,app.createLabel('Hour'))
   .setWidget(0,2,app.createLabel('Minutes'))
   .setWidget(0,3,app.createLabel('AM/PM'))
   .setWidget(0,4,app.createLabel('Location'))
   .setWidget(0,5,app.createLabel('Minute Taker'))

  hpanel.setWidget(1,0,dateBox)
   .setWidget(1,1,hour)
   .setWidget(1,2,min)
   .setWidget(1,3,amPm)
   .setWidget(1,4,location)
   .setWidget(1,5,minuteTaker)

  hpanel.setWidget(2,5,submit)
  app.add(hpanel);

  hpanelException.setWidget(1,1,warnPanel).setStyleAttribute("text-align", "right")
  app.add(hpanelException);
  return app;
}


function handlerFunction(e) {
  var app = UiApp.getActiveApplication();
  Utilities.sleep(1000);
  app.getElementById('submit').setText('SERVER HANDLER is DONE');
//  app.getElementById('warning').setVisible(false);// not necassary anymore, see clientHandler2
  return app;
    }