提交之前的表单验证

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小部件中显示所需数据的摘要，并带有一个漂亮的外观，另一个用于确认事件创建（并实际创建事件）的按钮，可以确定是确定用户的两个步骤（并且包括一种方法可以返回一步来更改/附加提交的数据）

两个解决方案，因为我已经sai d有亲和坏，第二个可能更容易为它编写脚本。

如果我提到的参考文献不够清楚，可随时发表评论和/或要求进一步的细节。

---

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