3

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

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

我究竟做错了什么?我已包含以下代码:

    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;
}
4

1 回答 1

1

我在表单验证上花费了很多时间,最终得到了两种效果很好的可能解决方案,但是由于我无法确定哪个是最好的,所以我有时使用第一个……有时使用第二个…… .

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

  1. “逻辑”之一:使用客户端验证来启用提交按钮和一些其他客户端处理程序验证来显示/隐藏必须填写的字段附近的警告标签。它工作得很好,但我必须承认为它编写脚本可能很棘手,并且需要相当多的代码。(请参阅这些帖子中的示例:字段表单验证和使用客户端处理程序的 FileUpload
    表单验证:为什么输入序列顺序会改变结果?
  2. 像在代码中那样使用服务器处理程序,但将“createEvent”按钮替换为中间按钮,而不是直接将您发送到事件创建函数调用“假”函数,该函数在 HTML 小部件中显示请求数据的摘要带有一个漂亮的演示文稿和另一个用于确认事件创建(并实际创建事件)的按钮,这是一种绝对用户友好的两步确认。(并包括一种返回步骤以更改/附加提交的数据的方法。

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

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


编辑:这是2cond 方法包含脚本的电子表格的示例(只读,复制以查看/编辑脚本并在脚本中更改电子表格 ID,如果您想运行自己的版本))说明是在法语中,但翻译起来应该不会太难......对此感到抱歉:-) SS有一个marter sheet,您可以在表单中定义问题,脚本会生成自定义表单。有一些工具可以计算回复、每天打印日志表和发送确认电子邮件。

于 2013-10-07T19:53:48.740 回答