提交之前的表格验证 [英] Form Validation Before Submission
本文介绍了提交之前的表格验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的表单在提交到我的电子表格之前无法验证。一旦我点击提交，它什么都不做......
我也不确定如何验证日期以确保它在提交前处于正确的格式。我试图设置验证，但在我测试之前，我必须能够提交并获得验证结果。
我做错了什么？我已经包含下面的代码：
function doGet（）{
var app = UiApp.createApplication（）。setTitle （'DHS：Kurzweil日历'）;
//创建一个包含所有表单elelemnts的面板
var vrtMainPanel = app.createVerticalPanel（）。setId（'vrtMainPanel'）;
//创建电子表格源
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'）;
//创建表单元素
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（）; （var l = 0; 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'）;
//将DateBox设置为明天的日期
var tomorrow = new Date（new Date（new Date（）。setHours（0,0,0,0））。setDate（new Date ）.getDate（）+ 1））; //设置小时，分钟，秒和毫秒到0和日=天+ 1
//Logger.log（明天）;
var lblDate = app.createLabel（'测试日期：'）;
var boxDate = app.createDateBox（）。setId（'boxDate'）.setName（'boxDate'）.setFormat（UiApp.DateTimeFormat.DATE_SHORT）.setValue（tomorrow）;
$ b $ var lbxSubject = app.createListBox（）。setId（'lbxSubject'）。setName（'lbxSubject'）;
var lstSubjects = spSubjectList.getRange（1,1，spSubjectList.getLastRow（），1）.getValues（）;
lstSubjects.sort（）; （var l = 0; l
}
var lbxPeriod = app.createListBox（）。setId（'lbxPeriod'）。setName（'lbxPeriod'）;
var lstPeriods = spPeriodList.getRange（1,1，spPeriodList.getLastRow（），1）.getValues（）;
lstPeriods.sort（）; （var l = 0; l
}
var lblStudentNum = app.createLabel（'学生人数：'）;
var lbxStudentNum = app.createListBox（）。setId（'lbxStudentNum'）。setName（'lbxStudentNum'）;
var lstStudentNums = spCountList.getRange（1,1，spCountList.getLastRow（），1）.getValues（）;
lstStudentNums.sort（）; （var l = 0; 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）;
//创建源单选按钮组
var radHCopy ='app1'，'Hard-Copy'）。 。createClientHandler（）forTargets（txtSourceGrp）.setText（ '硬拷贝'））;
var radECopy = app.createRadioButton（'group1'，'Electronic-Copy'）。setFormValue（'Electronic-Copy'）.addClickHandler（app.createClientHandler（）.forTargets（txtSourceGrp）.setText（'Electronic-Copy ））;
//创建类型单选按钮组
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'）;
//文本框的客户端处理程序
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）;
//创建验证处理程序
var valSubmit = app.createServerClickHandler（'valSubmit'）;
valSubmit.addCallbackElement（vrtMainPanel）;
//将此处理程序添加到按钮
btnValidate.addClickHandler（valSubmit）;
//将所有元素添加到面板
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，radCopy）
.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）
//将此面板添加到应用程序
app.add（vrtMainPanel）;
//返回应用程序
return app;
}
函数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;
$ b $ 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（真）;
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; （日期，'EST'，'yyyy-mm-dd'））{
app.getElementById（' setText（'* Date必须输入为yyyy-mm-dd'）。setStyleAttribute（color，＃F00）。setVisible（true）;
app.getElementById（'lblNoSuccess'）。setStyleAttribute（color，＃F00）。setVisible（true）;
flag = 1; （StudentNum ==''|| StudentNum ==' - Select＃ - '）{
app.getElementById（'vldStudentNum'）。setText（'* Select Student
}
if ＃'）。setStyleAttribute（color，＃F00）。setVisible（true）;
app.getElementById（'lblNoSuccess'）。setStyleAttribute（color，＃F00）。setVisible（true）;
flag = 1;
if（Source ==''|| Source == false）{
app.getElementById（'vldSourceGrp'）。setText（'* Select 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（'*选择教师制考试，元考试，或Quia Exam'）。setStyleAttribute（color，＃F00）。setVisible（true）;
app.getElementById（'lblNoSuccess'）。setStyleAttribute（color，＃F00）。setVisible（true）;
flag = 1; （元素ID ==''&& Type ='元素考试'）{
}
setText（'* Enter Elements ID' ）.setStyleAttribute（color，＃F00）。setVisible（true）;
app.getElementById（'lblNoSuccess'）。setStyleAttribute（color，＃F00）。setVisible（true）;
flag = 1; （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）;
//创建一个处理器，它将通过点击按钮
来执行'createEvents（e）'var evtHandler = app.createServerClickHandler（'createEvents'）;
var vrtMainPanel = app.getElementById（vrtMainPanel）;
evtHandler.addCallbackElement（vrtMainPanel）;
函数valHandler（e）{
var app = UiApp.createApplication（）。setTitle（'DHS：Kurzweil Calendar'）;
//创建一个包含所有表单elelemnts的面板
var vrtMainPanel = app.createVerticalPanel（）。setId（'vrtMainPanel'）;
$ b $ var lblSuccess = app.createLabel（'检查下面的信息，如果一切看起来正确，你可以确认你的事件...'）setName（'lblSuccess'）.setId（'lblSuccess'）。调用setVisible（假）;
var lblNoSuccess = app.createLabel（'创建事件时出现问题...单击BACK，并进行以下更正：'）。setName（'lblNoSuccess'）.setId（'lblNoSuccess'）。调用setVisible（假）;
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'）;
//将此处理程序添加到按钮
var evtHandler = app.getElementById（'evtHandler'）;
btnCreate.addClickHandler（evtHandler）;
//将所有元素添加到面板
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）
//将此面板添加到应用程序
app.add（vrtMainPanel） ;
//返回应用程序
return app;
}
解决方案
很多时候在表单验证上，我最终得到了两种可行的解决方案，这些解决方案工作得很好，但是由于我无法确定哪一个是最好的，有时候我会使用第一个......有时候第二个......
我将展示这两种解决方案的想法，并作出您的选择。
- '逻辑'一：使用客户端验证来启用提交按钮和一些其他客户端处理程序验证，以在必须填写的字段附近显示/隐藏警告标签。它工作的很好，但我必须承认为它编写脚本可能会非常棘手，并且需要相当多的代码。 （请参阅以下这些帖子中的示例：表单验证字段和FileUpload
使用客户端处理程序进行表单验证：为什么输入序列顺序会改变结果？ - 使用像您在代码中那样的服务器处理程序，具有中间按钮的createEvent按钮不是直接发送给事件创建函数，而是调用一个假函数，该函数显示HTML小部件中所需数据的摘要，并带有一个漂亮的外观和另一个用于确认事件的创建（并且实际上创建事件），做出确定用户友好的2步确认（并包括返回一步来更改/追加提交的方法
这两个解决方案我已经说过有专业和缺点，第二个解决方案可能更容易为它编写脚本。
可以随意评论和/或要求进一步的细节，如果我提到的引用不够清楚。
< hr>
编辑：这里是一个例子2秒方法和电子表格， a>（只读，复制以查看/编辑脚本，如果您想运行自己的版本，则更改脚本中的电子表格ID））
说明使用法语，但不应太难翻译......对不起:-) SS有一张表格，您可以在表格和scr中定义问题ipt生成一个自定义表单。有工具可以统计回复，每天打印日志并发送确认电子邮件。
I can't get my form to validate before it is submitted to my spreadsheet. Once I click submit it does nothing...
I also am not sure how to validate the Date to make sure it is in the correct format before submission. I have tried to setup the validation but before I can test it, i have to be able to submit and get validation results.
What am I doing wrong? I have included the code below:
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;
}
解决方案
I've been spending a lot of time on form validation and I ended up with 2 possible solutions that work pretty well but since I can't decide which one is the best I use sometimes the first... and sometimes the second...
I'll show the idea of both solution, make your choice.
- The 'logical' one : use client validation to enable the submit button and a few other client handler validations to show/hide warning labels near the fields that have to be filled. It works great but I must admit it can be tricky to write the script for it and needs quite a lot of code. (see examples in these post among others : Form validation on fields and FileUpload
Form validation using client handler : why does input sequence order change the result? - Use a server handler like you did in your code but replace the "createEvent" button with an intermediate button that instead of sending you directly to the event creation function calls a "fake" function that shows a summary of the requested data in a HTML widget with a nice looking presentation and another button that one use to confirm the event creation (and actually create the event) making a sort of 2 steps confirmation that is definitely user friendly. (and includes a way to go back one step to change/append the submitted data.
Both solution as I already said have pro and cons, the second one is just probably easier to write a script for it.
feel free to comment and/or ask for further details if the references I mentioned are not clear enough.
EDIT : here is an example of the 2cond approach and the spreadsheet with the included script (read only, make a copy to view/edit script and change the spreadsheet ID in the script if you want to run your own version)) The instructions are in french but it shouldn't be too hard to translate ... sorry about that :-) The SS has a marter sheet where you can define the question in the form and the script generates a custom form. There are tools to count responses, print log sheet per day and send confirmation emails.
这篇关于提交之前的表格验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
