Google Apps Script: Custom input validation handler and POST request

Question

Currently i am using a Submit button with some widget and associated client/server handlers. Upon click on Submit button data is sent using Post request.

Now i want to do all of the above but in a different way.

First, i dont want client/server handlers, for small number of widgets these are good but for many widgets these are confusing.

Now i just want to write a single validation handler that should be called on Submit button click, the handler should the input values in widgets and if all is good sent the data else display error warning.

Can we create and send a custom POST request instead of using Submit button?

I am using UiApp for my web app.

How to achieve this? Can anyone help me?

Harold Harold · Accepted Answer · 2014-01-29T15:27:55

You didn't precise if you were using UiApp or HTML service.

In UiApp here is what I can propose you:
You can add to your elements a clientHandler and check directly if the data are correct (and if all data are correct then you can display a submit button) exemple:

function doGet(){
  var app = UiApp.createApplication();
  var email = app.createTextBox().setId("text").setName("text").setValue("enter a vaild email");
  var field1 = app.createTextBox().setId("notNum").setName("notNum");
  var submitButt = app.createButton("submit").setEnabled(false);

  var emailhandler1 = app.createClientHandler().validateEmail(email).forEventSource().setStyleAttribute("color", "green");
  var emailhandler2 = app.createClientHandler().validateNotEmail(email).forEventSource().setStyleAttribute("color", "red").forTargets(submitButt).setEnabled(false);
  var fieldhandler1 = app.createClientHandler().validateNotLength(field1, 1, 100).forTargets(submitButt).setEnabled(false);
  var fieldhandler2 = app.createClientHandler().validateInteger(field1).forTargets(submitButt).setEnabled(false);
  var finalhandler = app.createClientHandler().forTargets(submitButt).validateLength(field1, 1, 100).validateNotNumber(field1).validateEmail(email).setEnabled(true);

  email.addChangeHandler(emailhandler1).addChangeHandler(emailhandler2).addChangeHandler(finalhandler);
  field1.addChangeHandler(fieldhandler1).addChangeHandler(fieldhandler2).addChangeHandler(finalhandler);
  app.add(app.createLabel("email: ")).add(email).add(app.createLabel("text (no number)")).add(field1).add(submitButt);
  return(app);
}

You can also use a server handler to check all the data and finally display the submit button:

function doGet(){
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  var formPanel = app.createFormPanel().add(panel);

  var email = app.createTextBox().setId("email").setName("email").setValue("enter a vaild email");
  var field1 = app.createTextBox().setId("notNum").setName("notNum");
  var validateButt = app.createButton("validate data").setId("validateButton");
  var submitButt = app.createButton("submit").setId("submit").setVisible(false);

  validateButt.addClickHandler(app.createServerHandler("checkdata").addCallbackElement(formPanel));

  panel.add(app.createLabel("email: ")).add(email).add(app.createLabel("text (no number)")).add(field1).add(validateButt).add(submitButt);
  app.add(formPanel);
  return(app);
}

function checkdata(e){
  var app = UiApp.getActiveApplication();
  var pattEmail = new RegExp(/([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})/);
  var pattTxt = new RegExp(/[^0-9]+/);
  Logger.log("email: "+e.parameter.email+" text: "+e.parameter.notNum);
  if(pattEmail.test(e.parameter.email) && pattTxt.test(e.parameter.notNum)){
    app.getElementById("validateButton").setVisible(false);
    app.getElementById("submit").setVisible(true);
  }
  else{
    Logger.log("not valid");
  }
  return(app);
}

But (in my opinion) the best way is using html service (as it's not in dev mode anymore):

script file:

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("html");
}

html file:

<div>
<form>
email:<br>
<input type="text"/ id="email" name="email" onchange="checkEmail();"><br>
text:<br>
<input type="text"/><br>
<input type="submit" value="submit"/>
</form>
</div>
<script>
function checkEmail(){
  var email = document.getElementById("email").value;
  var pattEmail = new RegExp(/([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})/);
  if(pattEmail.test(email)){
    document.getElementById("email").style.color = "green";
  }
}
</script>

EDIT after MA1 update

A variant of the second option: A submit button associated to a server handler that do all the work. If the data are correct they are processed. If not it display a warning to the user.

the demo:

function doGet(){
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel().setId("panel");
  var formPanel = app.createFormPanel().add(panel);
  var email = app.createTextBox().setId("email").setName("email").setValue("enter a vaild email");
  var validateButt = app.createButton("submit").setId("validateButton");
  validateButt.addClickHandler(app.createServerHandler("checkAndValData").addCallbackElement(formPanel));
  panel.add(app.createLabel("email: ")).add(email).add(validateButt);
  app.add(formPanel);
  return(app);
}

function checkAndValData(e){
  var app = UiApp.getActiveApplication();
  var pattEmail = new RegExp(/([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4})/);
  if(!pattEmail.test(e.parameter.email)){
    app.getElementById("email").setStyleAttribute("color", "red")
    return(app);
  }
  else{
    Logger.log("Do something with the data");
    app.getElementById("panel").add(app.createLabel("your data are are processed"));
    return(app);
  }
}

Google Apps Script: Custom input validation handler and POST request

1 Answers