validation - 提交前的表单验证

Question

在提交到我的电子表格之前，我无法验证我的表单。一旦我点击提交它什么都不做......

我也不确定如何在提交前验证日期以确保其格式正确。我已尝试设置验证，但在测试之前，我必须能够提交并获得验证结果。

我做错了什么？我包含了以下代码:

    function doGet() {
      var app = UiApp.createApplication().setTitle('DHS: Kurzweil Calendar');

      //Create a panel which holds all the form elelemnts
      var vrtMainPanel = app.createVerticalPanel().setId('vrtMainPanel');

      //Create Spreadsheet Source
      var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dFF0dVZXb3I1Yjlpbzg3SXFIaklEcUE');
      var spTeacherList = spSheet.getSheetByName('TeacherList');
      var spSubjectList = spSheet.getSheetByName('SubjectList');
      var spPeriodList = spSheet.getSheetByName('PeriodList');
      var spCountList = spSheet.getSheetByName('CountList');

      //Create the form elements
      var hdlTeacherName = app.createServerHandler('getTeacherName').addCallbackElement(vrtMainPanel);
      var lbxTeacherName = app.createListBox().setId('lbxTeacherName').setName('lbxTeacherName').addChangeHandler(hdlTeacherName);
      var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),1).getValues();
          lstTeacherNames.sort();

          for (var l = 0; l < lstTeacherNames.length; l++) {
            lbxTeacherName.addItem(lstTeacherNames[l],l);
          }

      var lblTeacherName = app.createLabel('Teacher Name:');
      var txtTeacherName = app.createTextBox().setName('txtTeacherName').setId('txtTeacherName').setVisible(false);

      var lblExt = app.createLabel('Ext:');
      var txtExt = app.createTextBox().setName('txtExt').setId('txtExt');

   //Set DateBox to Tomorrow's Date
      var tomorrow =new Date(new Date(new Date().setHours(0,0,0,0)).setDate(new Date().getDate() + 1));// set hours, min, sec & milliSec to 0 and day=day+1
      //Logger.log(tomorrow);
      var lblDate = app.createLabel('Date of Test:');
      var boxDate = app.createDateBox().setId('boxDate').setName('boxDate').setFormat(UiApp.DateTimeFormat.DATE_SHORT).setValue(tomorrow);

      var lbxSubject = app.createListBox().setId('lbxSubject').setName('lbxSubject');
      var lstSubjects = spSubjectList.getRange(1,1,spSubjectList.getLastRow(),1).getValues();
          lstSubjects.sort();

          for (var l = 0; l < lstSubjects.length; l++) {
            lbxSubject.addItem(lstSubjects[l]);
          }

      var lbxPeriod = app.createListBox().setId('lbxPeriod').setName('lbxPeriod');
      var lstPeriods = spPeriodList.getRange(1,1,spPeriodList.getLastRow(),1).getValues();
          lstPeriods.sort();

          for (var l = 0; l < lstPeriods.length; l++) {
            lbxPeriod.addItem(lstPeriods[l]);
          }

      var lblStudentNum = app.createLabel('Number of Students:');
      var lbxStudentNum = app.createListBox().setId('lbxStudentNum').setName('lbxStudentNum');
      var lstStudentNums = spCountList.getRange(1,1,spCountList.getLastRow(),1).getValues();
          lstStudentNums.sort();

          for (var l = 0; l < lstStudentNums.length; l++) {
            lbxStudentNum.addItem(lstStudentNums[l]);
          }

      var txtSourceGrp = app.createTextBox().setName('txtSourceGrp').setVisible(false);
      var txtTypeGrp = app.createTextBox().setName('txtTypeGrp').setVisible(false);
      var txtElementsID = app.createTextBox().setName('txtElementsID').setText('Elements Test ID').setVisible(false);
      var txtQuiaLink = app.createTextBox().setName('txtQuiaLink').setText('Quia Test Link').setVisible(false);
      var txtQuiaPass = app.createTextBox().setName('txtQuiaPass').setText('Quia Test Passphrase').setVisible(false);

      //Create Source Radio Button Group
      var radHCopy = app.createRadioButton('group1', 'Hard-Copy').setFormValue('Hard-Copy').addClickHandler(app.createClientHandler().forTargets(txtSourceGrp).setText('Hard-Copy'));
      var radECopy = app.createRadioButton('group1', 'Electronic-Copy').setFormValue('Electronic-Copy').addClickHandler(app.createClientHandler().forTargets(txtSourceGrp).setText('Electronic-Copy'));

      //Create Type Radio Button Group
      var radTExam = app.createRadioButton('group2', 'Teacher-Made Exam').setFormValue('Teacher-Made Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Teacher-Made Exam'));
      var radEExam = app.createRadioButton('group2', 'Elements Exam').setFormValue('Elements Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Elements Exam'));
      var radQExam = app.createRadioButton('group2', 'Quia Exam').setFormValue('Quia Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Quia Exam'));

      var btnValidate = app.createButton('Create Event');

      //Client Handlers for textBoxes
      var showTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(true);
      var hideTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(false);
          radEExam.addClickHandler(showTxtElementHandler);
          radTExam.addClickHandler(hideTxtElementHandler);
          radQExam.addClickHandler(hideTxtElementHandler);


      var showTxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(true);
      var hideTxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(false);
          radQExam.addClickHandler(showTxtQuiaLinkHandler);
          radTExam.addClickHandler(hideTxtQuiaLinkHandler);
          radEExam.addClickHandler(hideTxtQuiaLinkHandler);

      var showTxtQuiaPassHandler = app.createClientHandler().forTargets(txtQuiaPass).setVisible(true);
      var hideTxtQuiaPassHandler = app.createClientHandler().forTargets(txtQuiaPass).setVisible(false);
          radQExam.addClickHandler(showTxtQuiaPassHandler);
          radTExam.addClickHandler(hideTxtQuiaPassHandler);
          radEExam.addClickHandler(hideTxtQuiaPassHandler);

      //Create validation handler
      var valSubmit = app.createServerClickHandler('valSubmit');
          valSubmit.addCallbackElement(vrtMainPanel);

      //Add this handler to the button
          btnValidate.addClickHandler(valSubmit);

      //Add all the elemnts to the panel 
          var formGrid = app.createGrid(12,3).setCellPadding(3);
          vrtMainPanel.add(formGrid);
          formGrid
          .setWidget(0,0,lbxTeacherName)
          .setWidget(0,1,txtExt)
          .setWidget(0,2,txtTeacherName)
          .setWidget(1,0,lbxPeriod)
          .setWidget(1,1,lbxSubject)
          .setWidget(2,0,lblDate)
          .setWidget(2,1,boxDate)
          .setWidget(3,0,lblStudentNum)
          .setWidget(3,1,lbxStudentNum)
          .setWidget(4,0,radHCopy)
          .setWidget(4,1,radECopy)
          .setWidget(5,0,radTExam)
          .setWidget(6,0,radEExam)
          .setWidget(6,1,txtElementsID)
          .setWidget(7,0,radQExam)
          .setWidget(7,1,txtQuiaLink)
          .setWidget(8,1,txtQuiaPass)
          .setWidget(9,0,txtSourceGrp)
          .setWidget(9,1,txtTypeGrp)
          .setWidget(10,0,btnValidate)

      //Add this panel to the application
      app.add(vrtMainPanel);

      //Return the application
      return app;
}

function valSubmit(e) {
  var flag = 0;
  var app = UiApp.getActiveApplication();

  var Teacher = e.parameter.txtTeacherName;
  var Ext = e.parameter.txtExt;
  var Subject = e.parameter.lbxSubject;
  var Period = e.parameter.lbxPeriod;
  var Date = e.parameter.boxDate;
  var StudentNum = e.parameter.lbxStudentNum;
  var Source = e.parameter.txtSourceGrp;
  var Type = e.parameter.txtTypeGrp;
  var ElementsID = e.parameter.txtElementsID;
  var QuiaLink = e.parameter.txtQuiaLink;
  var QuiaPass = e.parameter.txtQuiaPass;

  if (Teacher == '' || Teacher == '-- Select Teacher --') {
    app.getElementById('vldTeacherName').setText('* Select Teacher').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (Ext == '') {
    app.getElementById('vldExt').setText('* Select Teacher Again').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (Subject == '' || Subject == '-- Select Subject --') {
    app.getElementById('vldSubject').setText('* Select Subject').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (Period == '' || Period == '-- Select Period --') {
    app.getElementById('vldPeriod').setText('* Select Period').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (Date == '' || Date == Utilities.formatDate(Date, 'EST', 'yyyy-mm-dd')) {
    app.getElementById('vldDate').setText('* Date must be entered as yyyy-mm-dd').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (StudentNum == '' || StudentNum == '-- Select # --') {
    app.getElementById('vldStudentNum').setText('* Select Student #').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (Source == '' || Source == false) {
    app.getElementById('vldSourceGrp').setText('* Select either Hard Copy or Electronic Copy').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (Type == '' || Type == false) {
    app.getElementById('vldTypeGrp').setText('* Select either Teacher-Made Exam, Elements Exam, or Quia Exam').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (ElementsID == '' && Type == 'Elements Exam') {
    app.getElementById('vldElementsID').setText('* Enter Elements ID').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (QuiaLink == '' || QuiaPass == '' && Type == 'Quia Exam') {
    app.getElementById('vldQuia').setText('* Enter Quia Link and/or Passphrase').setStyleAttribute("color", "#F00").setVisible(true);
    app.getElementById('lblNoSuccess').setStyleAttribute("color", "#F00").setVisible(true);
    flag = 1;
  }
  if (flag == 0) {
    app.getElementById('lblSuccess').setStyleAttribute("color", "#F00").setVisible(true);

    //Create handler which will execute 'createEvents(e)' on clicking the button
    var evtHandler = app.createServerClickHandler('createEvents');
    var vrtMainPanel = app.getElementById(vrtMainPanel);
        evtHandler.addCallbackElement(vrtMainPanel);
  }
}

function valHandler(e) {
  var app = UiApp.createApplication().setTitle('DHS: Kurzweil Calendar');

  //Create a panel which holds all the form elelemnts
  var vrtMainPanel = app.createVerticalPanel().setId('vrtMainPanel');

  var lblSuccess = app.createLabel('Check your information below, if everything looks correct you may confirm your event...').setName('lblSuccess').setId('lblSuccess').setVisible(false);
  var lblNoSuccess = app.createLabel('There were issues with the creation of your event... click BACK, and make the following corrections:').setName('lblNoSuccess').setId('lblNoSuccess').setVisible(false);
  var vldTeacherName = app.createLabel().setId('vldTeacherName').setVisible(false);
  var vldExt = app.createLabel().setId('vldExt').setVisible(false);
  var vldDate = app.createLabel().setId('vldDate').setVisible(false);
  var vldSubject = app.createLabel().setId('vldSubject').setVisible(false);
  var vldPeriod = app.createLabel().setId('vldPeriod').setVisible(false);
  var vldStudentNum = app.createLabel().setId('vldStudentNum').setVisible(false);
  var vldSourceGrp = app.createLabel().setId('vldSourceGrp').setVisible(false);
  var vldTypeGrp = app.createLabel().setId('vldTypeGrp').setVisible(false);
  var vldElementsID = app.createLabel().setId('vldElementsID').setVisible(false);
  var vldQuia = app.createLabel().setId('vldQuia').setVisible(false);

  var btnCreate = app.createButton('Corfirm Event');

  //Add this handler to the button
  var evtHandler = app.getElementById('evtHandler');
  btnCreate.addClickHandler(evtHandler);

  //Add all the elemnts to the panel 
          var formGrid = app.createGrid(13,3).setCellPadding(3);
          vrtMainPanel.add(formGrid);
          formGrid
          .setWidget(0,0,lblSuccess)
          .setWidget(1,0,lblNoSuccess)
          .setWidget(2,0,vldTeacherName)
          .setWidget(3,0,vldExt)
          .setWidget(4,0,vldDate)
          .setWidget(5,0,vldSubject)
          .setWidget(6,0,vldPeriod)
          .setWidget(7,0,vldStudentNum)
          .setWidget(8,0,vldSourceGrp)
          .setWidget(9,0,vldTypeGrp)
          .setWidget(10,0,vldElementsID)
          .setWidget(11,0,vldQuia)
          .setWidget(12,0,btnCreate)

  //Add this panel to the application
      app.add(vrtMainPanel);

      //Return the application
      return app;
}

Answer 1

我花了很多时间在表单验证上，最后我得到了 2 种可能的解决方案，它们工作得很好，但由于我无法决定哪个是最好的，所以我有时会使用第一个……有时是第二...

我将展示两种解决方案的想法，让您做出选择。

1. “逻辑”之一:使用客户端验证来启用提交按钮和一些其他客户端处理程序验证来显示/隐藏必须填写的字段附近的警告标签。它工作得很好，但我必须承认为它编写脚本可能很棘手并且需要大量代码。 (请参阅这些帖子中的示例:Form validation on fields and FileUpload
   Form validation using client handler : why does input sequence order change the result?
2. 像您在代码中所做的那样使用服务器处理程序，但将“createEvent”按钮替换为一个中间按钮，该中间按钮不会将您直接发送到事件创建函数，而是调用一个“假”函数，该函数在一个 HTML 小部件，带有漂亮的演示文稿和另一个用于确认事件创建(并实际创建事件)的按钮，进行一种绝对用户友好的两步确认。 (并包括一种返回一步以更改/附加提交的数据的方法。

正如我已经说过的，这两种解决方案都有利有弊，第二种解决方案可能更容易为其编写脚本。

如果我提到的引用资料不够清楚，请随时发表评论和/或询问更多详细信息。

---

编辑:这里是 an example of the 2cond approach和 spreadsheet with the included script (只读，制作副本以查看/编辑脚本并更改脚本中的电子表格 ID，如果您想运行自己的版本))说明是法语的，但翻译起来应该不会太难……抱歉 :-) SS 有一个 marter 表，您可以在其中定义表单中的问题，脚本会生成一个自定义表单。有一些工具可以计算响应、每天打印日志表和发送确认电子邮件。