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

我一直在花费大量时间进行表单验证，最后我得到了两个可行的解决方案，但是由于我无法确定哪一个是最好的，我有时会使用第一个...有时候第二...

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

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

我已经说过的两个解决方案都有赞成和缺点，第二个可能更容易为它编写脚本。

如果我提到的参考文献不够清楚，请随时发表评论和/或询问更多细节。

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

提交前的表格确认

1 个答案: