对字段和FileUpload进行表单验证 [英] Form validation on fields and FileUpload
本文介绍了对字段和FileUpload进行表单验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找具有文本输入且文件上传文件附件。
该脚本需要输入并允许用户附加文件。提交后，它会将输入字段添加到电子表格并将文件上传到我的驱动器。我想要做的是强制文本输入和下拉列表来回答，并需要一个文件附件。
我发现这个链接的例子示例验证，但我遇到问题，试图将其添加到我的点击处理程序中码。任何人都可以帮助指出正确的方向吗？
// Script-as-app模板。
var submissionSSKey ='插入SS密钥';
函数doGet（e）{
var app = UiApp.createApplication（）。setTitle（'Loan Registration Processing'）;
var panel = app.createFormPanel（）;
var grid = app.createGrid（10,2）.setId（'loanGrid'）;
var loanTypeLabel = app.createLabel（'Loan Type'）;
var loanList = app.createListBox（）。setName（'Loan List'）。setWidth（'120px'）。setName（'LoanType'）;
loanList.addItem（'Select Option'）;
loanList.addItem（'FHA'）;
loanList.addItem（'Convential'）;
loanList.addItem（'VA'）;
loanList.addItem（'Reverse'）;
loanList.addItem（'HELOC'）;
var borrowerNameLabel = app.createLabel（借款人姓名）;
var borrowerTextbox = app.createTextBox（）。setWidth（'150px'）。setName（'borrower'）;
var loanAmountLabel = app.createLabel（'Loan Amount'）;
var loanAmountTextbox = app.createTextBox（）。setWidth（'150px'）。setName（'amount'）;
var appDateLabel = app.createLabel（'Loan Date'）;
var appDateTextbox = app.createDateBox（）。setWidth（'150px'）。setName（'date'）;
var lienPostition = app.createLabel（'Lien Position'）;
var lienPos = app.createListBox（）。setName（'Lien Position'）。setWidth（'150px'）。setName（'LienPosition'）;
lienPos.addItem（'Select Option'）;
lienPos.addItem（'1st'）;
lienPos.addItem（'2nd'）;
var propertyType = app.createLabel（'Property Type'）;
var propType = app.createListBox（）。setName（'Property Type'）。setWidth（'150px'）。setName（'PropertyType'）;
propType.addItem（'Select Option'）;
propType.addItem（'1-4 Units'）;
propType.addItem（'Manufactured'）;
var submitButton = app.createSubmitButton（'< B>提交< / B>'）;
var warning = app.createHTML（'< B>请在数据上传时等待'）。setStyleAttribute（'background'，'yellow'）。setVisible（false）
// file上传
var upLoadTypeLabel = app.createLabel（'Point File'）;
var upLoad =（app.createFileUpload（）。setName（'thefile'））;
var upLoadTypeLabel2 = app.createLabel（'Credit Report'）;
var upLoad2 =（app.createFileUpload（）。setName（'thefile2'））;
//格式
的网格布局grid.setWidget（0，0，loanTypeLabel）
.setWidget（0，1，loanList）
.setWidget（ 1，0，borrowerNameLabel）
.setWidget（1，1，borrowerTextbox）
.setWidget（2，0，loanAmountLabel）
.setWidget（2，1，loanAmountTextbox）
。 setWidget（3，0，appDateLabel）
.setWidget（3，1，appDateTextbox）
.setWidget（4，0，lienPostition）
.setWidget（4，1，lienPos）
.setWidget（5，0，propertyType）
.setWidget（5，1，propType）
.setWidget（6，0，upLoadTypeLabel）
.setWidget（6，1，upLoad）
.setWidget（7，0，upLoadTypeLabel2）
.setWidget（7，1，upLoad2）
.setWidget（8，0，submitButton）
.setWidget（9，1，warning ）
var cliHandler = app.createClientHandler（）。forTargets（warning）.setVisible（true）
submitButton.addClickHandler（cliHandler）;
panel.add（grid）;
app.add（panel）;
返回应用程序;
函数doPost（e）{
var app = UiApp.getActiveApplication（）;
var LoanType = e.parameter.LoanType;
var borrower = e.parameter.borrower;
var amount = e.parameter.amount;
var date = e.parameter.date;
var LienPosition = e.parameter.LienPosition;
var PropertyType = e.parameter.PropertyType;
// Spreadsheet将表单值加载到
var sheet = SpreadsheetApp.openById（submissionSSKey）.getActiveSheet（）;
var lastRow = sheet.getLastRow（）;
var targetRange = sheet.getRange（lastRow + 1，1，1，6）.setValues（[[LoanType，borrower，amount，date，LienPosition，PropertyType]]）;
//返回的数据是FileUpload小部件的一个blob
var fileBlob = e.parameter.thefile;
var fileBlob2 = e.parameter.thefile2;
//抓取文件夹以发送上传文件
var folder = DocsList.getFolderById（'0B8PHKnfhErK-T2IzRW9ZWjcwRmc'）;
//创建根目录中的上传文件
var doc = DocsList.createFile（fileBlob）;
var doc2 = DocsList.createFile（fileBlob2）;
//将创建的文件移动到特定的文件夹
doc.addToFolder（folder）;
doc2.addToFolder（folder）;
//删除根目录中的副本，仅保留特定文件夹中的版本
doc.removeFromFolder（DocsList.getRootFolder（））;
doc2.removeFromFolder（DocsList.getRootFolder（））;
//在提交表格后给用户的信息
var uplabel = app.createHTML（'< B>感谢您的贷款登记摘要按键盘上的F5键输入另一个贷款登记< / B个'）;
//发送电子邮件至群组
var emailAddress ='email@email.com';
var folderURL ='文件夹URL';
var ssURL ='SS URL';
var message =< HTML>< BODY>
+< P> +新的贷款注册已提交。
+'< P>您可以在此处访问贷款已提交的文件< A HREF ='+ folderURL +'>< / a> ;.'
+'< P>您可以访问提交的贷款注册电子表格< A HREF ='+ ssURL +'> here< / A> ;.'
+< / HTML>< / BODY>;
MailApp.sendEmail（emailAddress，新贷款登记提交发布！，，{htmlBody：message}）;
app.add（uplabel）;
返回应用程序;
编辑 - 新增第二个文件上传并提交不会启用 我已经回去编辑脚本并修改了一下，基本上可以像以前一样执行相同的功能，但是这需要上传两个文件。我是按照相同的代码，但测试后，提交按钮将永远不会启用..这是更新的代码：
//创建标签，文本框和下拉菜单
var borrowerTextbox = app.createTextBox（）。setWidth（'150px'）。setName（'borrower'）;
var Lender = app.createTextBox（）。setWidth（'150px'）。setName（'lender'）;
var corredentBroker = app.createListBox（）。setName（'Correspondent Broker'）。setWidth（'120px'）。setName（'correspondentbroker'）;
correspondentBroker.addItem（'Select Option'）;
correspondentBroker.addItem（'记者'）;
correspondentBroker.addItem（'Broker'）;
var loanAmountTextbox = app.createTextBox（）。setWidth（'150px'）。setName（'amount'）;
var loanprogram = app.createTextBox（）。setWidth（'150px'）。setName（'program'）;
var rate = app.createTextBox（）。setWidth（'150px'）。setName（'rate'）;
var ysp = app.createTextBox（）。setWidth（'150px'）。setName（'ysp'）;
var closingcostcredit = app.createTextBox（）。setWidth（'150px'）。setName（'credit'）;
var ltv = app.createTextBox（）。setWidth（'150px'）。setName（'ltv'）;
var impound = app.createListBox（）。setName（'impounds'）。setWidth（'120px'）。setName（'impounds'）;
impound.addItem（'Select Option'）;
impound.addItem（'Yes'）;
impound.addItem（'No'）;
var mortgageIns = app.createListBox（）。setName（'Correspondent Broker'）。setWidth（'120px'）。setName（'mortgageinsurance'）;
mortgageIns.addItem（'Select Option'）;
mortgageIns.addItem（'MI'）;
mortgageIns.addItem（'PMI借款人付费'）;
mortgageIns.addItem（'PMI Lender Paid'）;
var upLoad = app.createFileUpload（）。setName（'thefile'）;
var upLoad2 = app.createFileUpload（）。setName（'thefile2'）;
var uploadtracker = app.createTextBox（）。setVisible（false）;
var uploadtracker2 = app.createTextBox（）。setVisible（false）;
var submitButton = app.createSubmitButton（'< B>提交< / B>'）;
var warning = app.createHTML（'Please fill in all fields'）。setStyleAttribute（'background'，'＃FFcc99'）。setStyleAttribute（'fontSize'，'20px'）;
//点击处理程序设置
var cliHandler2 = app.createClientHandler（）
.validateLength（borrowerTextbox，1，40）
.validateLength贷款人，1,40）
.validateNotMatches（通讯员经纪人，'选择选项'）
.validateLength（loanAmountTextbox，1,40）
.validateLength（loanprogram，1,40）
.validateNotMatches（mortgageIns，'Select Option'）
.validateLength（rate，1,40）
.validateLength（ysp，1,40）
.validateLength（closingcostcredit，1,40）
.validateLength（ltv，1,40）
.validateNotMatches（impound，'选择选项'）
.validateMatches（uploadtracker，'selected'）
.validateMatches（uploadtracker2，'selected '）
.forTargets（submitButton）.setEnabled（true）
.forTargets（warning）
.setHTML（'现在您可以提交表单'）
.setStyleAttribute（'background '，'＃99FF99'）
.setStyleAttribute（'fontSize'，'12px'）;
$ b var cliHandler3 = app.createClientHandler（）.forTargets（uploadtracker）.forTargets（uploadtracker2）.setText（'selected'）
//表单上的项目的网格布局
grid.setText（0，'Borrower Name'）
.setWidget（0，1，borrowerTextbox）
.setText（1,0，贷方）
.setWidget （1，1，贷方）
.setText（2，0，'记录者或经纪人'）
.setWidget（2，1，通讯员经纪人）
.setText（3，0，'Loan金额'）
.setWidget（3，1，loanAmountTextbox）
.setText（4，0，'Loan Program'）
.setWidget（4，1，loanprogram）
。 setText（5,0'Rate'）
.setWidget（5,1，rate）
.setText（6,0，'YSP'）
.setWidget（6,1，ysp ）
.setText（7，0，'结算成本贷项'）
.setWidget（7，1，closingcostcredit）
.setText（8，0，'LTV'）
.setWidget（8，1，ltv）
.setText（9，0，'Impounds'）
.setWidget（9，1，impound）
.setText（10，0，'Point文件'）
.setWidget（1 0,1，upLoad.addChangeHandler（cliHandler3）.addChangeHandler（cliHandler2））
.setText（11，0，'Credit Report'）
.setWidget（11，1，upLoad2.addChangeHandler（cliHandler3）。 addChangeHandler（cliHandler2））
.setWidget（12，0，submitButton）
.setWidget（12，1，warning）
.setWidget（13，0，uploadtracker）
.setWidget （13，1，uploadtracker2）
.addClickHandler（cliHandler2）;
$ b var cliHandler = app.createClientHandler（）。forTargets（warning）.setHTML（'< B>请等待数据上传到Google Drive< B>'）。setStyleAttribute（'background' ，'黄色'）;
submitButton.addClickHandler（cliHandler）.setEnabled（false）;
panel.add（grid）;
app.add（panel）;
返回应用程序;编辑 - 添加CliHandler4
我更新了代码以反映第4个cliHandler，但我仍然无法激活submitbutton。不知道为什么它失败..我已经看了好几遍，我似乎无法弄清楚什么是错的。这里是代码
编辑为答案：UI中缺少一个小部件（mortgageInside）
var submissionSSKey ='ID GOES HERE ;
var Panelstyle = {'background'：'＃c0d6e4'，'padding'：'100px'，'borderStyle'：'ridge'，'borderWidth'：'15PX'，'borderColor'：'＃31698a'}
函数doGet（e）{
var app = UiApp.createApplication（）。setTitle（'PCH Mortgage Disclosure Request'）;
app.add（app.createImage（http://www.pchmortgage.com/img/logo_thumbnail/6644.png））;
var instructLabel = app.createHTML（'< B>< p>< / p>< p>确保在提交Disclsure请求之前完整填写每个字段< / P>< B个'）;
app.add（instructLabel）;
//为应用程序创建FormPanel和Grid
var panel = app.createFormPanel（）。setStyleAttributes（Panelstyle）.setPixelSize（450，300）;
var grid = app.createGrid（15,2）.setId（'loanGrid'）;
//创建标签，文本框和下拉菜单
var borrowerTextbox = app.createTextBox（）。setWidth（'150px'）。setName（'borrower'）;
var lender = app.createTextBox（）。setWidth（'150px'）。setName（'lender'）;
var corredentBroker = app.createListBox（）。setName（'Correspondent Broker'）。setWidth（'120px'）。setName（'correspondentbroker'）;
correspondentBroker.addItem（'Select Option'）;
correspondentBroker.addItem（'记者'）;
correspondentBroker.addItem（'Broker'）;
var loanAmountTextbox = app.createTextBox（）。setWidth（'150px'）。setName（'amount'）;
var loanprogram = app.createTextBox（）。setWidth（'150px'）。setName（'program'）;
var rate = app.createTextBox（）。setWidth（'150px'）。setName（'rate'）;
var ysp = app.createTextBox（）。setWidth（'150px'）。setName（'ysp'）;
var closingcostcredit = app.createTextBox（）。setWidth（'150px'）。setName（'credit'）;
var ltv = app.createTextBox（）。setWidth（'150px'）。setName（'ltv'）;
var impound = app.createListBox（）。setName（'impounds'）。setWidth（'120px'）。setName（'impounds'）;
impound.addItem（'Select Option'）;
impound.addItem（'Yes'）;
impound.addItem（'No'）;
var mortgageIns = app.createListBox（）。setName（'Correspondent Broker'）。setWidth（'120px'）。setName（'mortgageinsurance'）;
mortgageIns.addItem（'Select Option'）;
mortgageIns.addItem（'MI'）;
mortgageIns.addItem（'PMI借款人付费'）;
mortgageIns.addItem（'PMI Lender Paid'）;
var upLoad = app.createFileUpload（）。setName（'thefile'）;
var upLoad2 = app.createFileUpload（）。setName（'thefile2'）;
var uploadtracker = app.createTextBox（）。setVisible（false）;
var uploadtracker2 = app.createTextBox（）。setVisible（false）;
var submitButton = app.createSubmitButton（'< B>提交< / B>'）;
var warning = app.createHTML（'Please fill in all fields'）。setStyleAttribute（'background'，'＃9999ff'）。setStyleAttribute（'fontSize'，'20px'）;
//单击处理程序设置
var cliHandler2 = app.createClientHandler（）。validateLength（borrowerTextbox，1，40）.validateLength（lender，1，40）$ b （贷款计划，1,40）
.validateLength（利率，1,40）.validateLength（ysp，1，40）$ b .validateNotMatches（correspondentBroker，'Select Option'）。validateLength（loanAmountTextbox，1,40）.validateLength 40）.validateLength（closingcostcredit，1,40）
.validateLength（ltv，1,40）.validateNotMatches（mortgageIns''Select Option'）
.validateMatches（uploadtracker，'selected'）。validateMatches（ （'现在您可以提交您的表单'）
.setStyleAttribute（'background'，'＃uploadtracker2，'selected'）
.forTargets（submitButton）.setEnabled（true）.forTargets（warning）.setHTML 99FF99 '）setStyleAttribute（' fontSize的， '12像素'）;
$ b $ var cliHandler3 = app.createClientHandler（）。forTargets（uploadtracker）.setText（'selected'）
var cliHandler4 = app.createClientHandler（）.forTargets（uploadtracker2）.setText（'selected '）
//表单上的项目的网格布局
grid.setText（0，'借用者名称'）
.setWidget（0，1，borrowerTextbox）
.setText （1，0，贷方）
.setWidget（1,1，贷方）
.setText（2，'记者或经纪人'）
.setWidget（2，1， ）
.setText（3，0，'贷款金额'）
.setWidget（3，1，loanAmountTextbox）
.setText（4，0，'贷款计划'）
.setWidget（4,1，loanprogram）
.setText（5,0，'Rate'）
.setWidget（5,1，rate）
.setText（6，0，'' YSP'）
.setWidget（6，1，ysp）
.setText（7，0，'Closing Cost Credit'）
.setWidget（7，1，closingcostcredit）
.setText（8，0，'LTV'）
.setWidget（8，1，ltv）
.setText（9，0，'Impounds'）
.setWidget（9 ，1，impound）
.setText（10，'Mortgage Insurance'）
.setWidget（10，1，mortgageIns）
.setText（11，0，'Point File'）
.setWidget（11,1，upLoad.addChangeHandler（cliHandler3）.addChangeHandler（cliHandler2））
.setText（12，0，'Credit Report'）
.setWidget（12，1， upLoad2.addChangeHandler（cliHandler4）.addChangeHandler（cliHandler2））
.setWidget（13，0，submitButton）
.setWidget（13，1，警告）
.setWidget（14，0，uploadtracker ）
.setWidget（14，1，uploadtracker2）
.addClickHandler（cliHandler2）;
$ b var cliHandler = app.createClientHandler（）。forTargets（warning）.setHTML（'< B>等待数据上载到GOOGLE DRIVE< B>'）setStyleAttribute（'background' ，'黄色'）;
submitButton.addClickHandler（cliHandler）.setEnabled（false）;
panel.add（grid）;
app.add（panel）;
返回应用程序;
}
解决方案
是使用验证器的另一个客户端处理程序。我建议像这样把它放在fileUpload上：（在你的代码中替换在同一个地方）
pre $ c $ var cliHandler2 = app。 createClientHandler（）。validateLength（loanAmountTextbox，1，20）
.validateLength（borrowerTextbox，1，20）.validateLength（lienPos，1，20）.forTargets（submitButton）.setEnabled（true）; //你可以添加更多条件（小部件名称，最小长度，最大长度）
var upLoad = app.createFileUpload（）。setName（'thefile'）。addChangeHandler（cliHandler2）;
并且这一个启用提交按钮！您可以在此处进行测试
编辑
以下是更复杂的选项，用于检查所有小部件在客户端处理程序....我重现整个相关部分并更新在线示例 - EDIT3 ：DateBox验证不起作用，这是我们必须经历的问题！ 在此期间，我在同一处理程序中添加了新的消息处理功能。
编辑4：（最后一个！ p>
我终于找到了每个窗口小部件类型的工作解决方案，日期必须包含'2'（我认为这将是真实的; - ）整个doGet函数，因为我在这里和那里做了其他一些更改......当fileUpload小部件填充到最后位置（不知道为什么）时它效果最好，并且在某些情况下需要重新修改一个textBow来获得验证，但在大多数情况下，它的工作是应该的。
函数doGet（e）{
var app = UiApp.createApplication（）。setTitle（'Loan Registration Processing'）;
var panel = app.createFormPanel（）;
var grid = app.createGrid（8,2）.setId（'loanGrid'）;
var loanList = app.createListBox（）。setName（'Loan List'）。setWidth（'120px'）。setName（'LoanType'）;
loanList.addItem（'Select Option'）;
loanList.addItem（'FHA'）;
loanList.addItem（'Convential'）;
loanList.addItem（'VA'）;
loanList.addItem（'Reverse'）;
loanList.addItem（'HELOC'）;
var borrowerTextbox = app.createTextBox（）。setWidth（'150px'）。setName（'borrower'）;
var loanAmountTextbox = app.createTextBox（）。setWidth（'150px'）。setName（'amount'）;
var appDatebox = app.createDateBox（）。setWidth（'150px'）。setName（'date'）;
var lienPos = app.createListBox（）。setName（'Lien Position'）。setWidth（'150px'）。setName（'LienPosition'）;
lienPos.addItem（'Select Option'）;
lienPos.addItem（'1st'）;
lienPos.addItem（'2nd'）;
var propType = app.createListBox（）。setName（'Property Type'）。setWidth（'150px'）。setName（'PropertyType'）;
propType.addItem（'Select Option'）;
propType.addItem（'1-4'）;
propType.addItem（'Manufactured'）;
var submitButton = app.createSubmitButton（'< B>提交< / B>'）;
var warning = app.createHTML（'Please fill in all fields'）。setStyleAttribute（'background'，'＃FFcc99'）。setStyleAttribute（'fontSize'，'20px'）;
//文件上传
var upLoad = app.createFileUpload（）。setName（'thefile'）;
var cliHandler2 = app.createClientHandler（）
.validateLength（borrowerTextbox，1，40）.validateLength（loanAmountTextbox，1，40）.validateNotMatches（loanList，'Select Option'）
.validateNotMatches （lienPos，'Select Option'）。validateNotMatches（propType，'Select Option'）。validateMatches（appDatebox，'2'，'g'）
.validateNotMatches（upLoad，'FileUpload'）.forTargets（submitButton）。 setStyleAttribute（'background'，'＃99FF99'）。setStyleAttribute（'fontSize'，'12px'）$ b setEnabled（true）.forTargets（warning）
.setHTML（'Now you can submit your form'
$ b //格式
的网格布局grid.setText（0，'Loan Type'）
.setWidget（0，1，loanList.addClickHandler（cliHandler2））
.setText（1,0，Borrower's Name）
.setWidget（1,1，borrowerTextbox.addKeyUpHandler（cliHandler2））
.setText（2，'Loan Amount'）
.setWidget（2，1，loanAmountTextbox.addKeyUpHandler（cliHandler2））
.setText（3，0，'Loan Date'）
.setWidget（3，1，appDatebox）
.setText（4，0，'Lien Position'）
.setWidget（4 ，1，lienPos.addClickHandler（cliHandler2））
.setText（5，0，'Property Type'）
.setWidget（5，1，propType.addClickHandler（cliHandler2））
.setText （6，0，'文件上传'）
.setWidget（6，1，upLoad.addChangeHandler（cliHandler2））
.setWidget（7，0，submitButton）
.setWidget（7， 1，警告）;
var cliHandler = app.createClientHandler（）。forTargets（warning）.setHTML（'< B>请在数据上传时请等待'）setStyleAttribute（'background'，'yellow' ）;
submitButton.addClickHandler（cliHandler）.setEnabled（false）;
panel.add（grid）;
app.add（panel）;
返回应用程序;
}
I'm looking to do validation / required fields on a form that has text input and fileupload for file attachments.
The script takes inputs and allows user to attach a file. Upon submit, it adds input fields to spreadsheet and uploads the file to my drive. What I want to do is force the text input and drop down lists to be answered and require a file attachment.
I found this link for examples "Example validation" but I'm having a problem trying to add this to the click handler in my code. Can anyone help point in the right direction?
// Script-as-app template.
var submissionSSKey = 'Insert SS Key';
function doGet(e) {
var app = UiApp.createApplication().setTitle('Loan Registration Processing');
var panel = app.createFormPanel();
var grid = app.createGrid(10,2).setId('loanGrid');
var loanTypeLabel = app.createLabel('Loan Type');
var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
loanList.addItem('Select Option');
loanList.addItem('FHA');
loanList.addItem('Convential');
loanList.addItem('VA');
loanList.addItem('Reverse');
loanList.addItem('HELOC');
var borrowerNameLabel = app.createLabel("Borrower's Name");
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var loanAmountLabel = app.createLabel('Loan Amount');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var appDateLabel = app.createLabel('Loan Date');
var appDateTextbox = app.createDateBox().setWidth('150px').setName('date');
var lienPostition = app.createLabel('Lien Position');
var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
lienPos.addItem('Select Option');
lienPos.addItem('1st');
lienPos.addItem('2nd');
var propertyType = app.createLabel('Property Type');
var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
propType.addItem('Select Option');
propType.addItem('1-4 Units');
propType.addItem('Manufactured');
var submitButton = app.createSubmitButton('<B>Submit</B>');
var warning = app.createHTML('<B>PLEASE WAIT WHILE DATA IS UPLOADING<B>').setStyleAttribute('background','yellow').setVisible(false)
//file upload
var upLoadTypeLabel = app.createLabel('Point File');
var upLoad = (app.createFileUpload().setName('thefile'));
var upLoadTypeLabel2 = app.createLabel('Credit Report');
var upLoad2 = (app.createFileUpload().setName('thefile2'));
//Grid layout of items on form
grid.setWidget(0, 0, loanTypeLabel)
.setWidget(0, 1, loanList)
.setWidget(1, 0, borrowerNameLabel)
.setWidget(1, 1, borrowerTextbox)
.setWidget(2, 0, loanAmountLabel)
.setWidget(2, 1, loanAmountTextbox)
.setWidget(3, 0, appDateLabel)
.setWidget(3, 1, appDateTextbox)
.setWidget(4, 0, lienPostition)
.setWidget(4, 1, lienPos)
.setWidget(5, 0, propertyType)
.setWidget(5, 1, propType)
.setWidget(6, 0, upLoadTypeLabel)
.setWidget(6, 1, upLoad)
.setWidget(7, 0, upLoadTypeLabel2)
.setWidget(7, 1, upLoad2)
.setWidget(8, 0, submitButton)
.setWidget(9, 1, warning)
var cliHandler = app.createClientHandler().forTargets(warning).setVisible(true)
submitButton.addClickHandler(cliHandler);
panel.add(grid);
app.add(panel);
return app;
}
function doPost(e) {
var app = UiApp.getActiveApplication();
var LoanType = e.parameter.LoanType;
var borrower = e.parameter.borrower;
var amount = e.parameter.amount;
var date = e.parameter.date;
var LienPosition = e.parameter.LienPosition;
var PropertyType = e.parameter.PropertyType;
//Spreadsheet to load form values to
var sheet = SpreadsheetApp.openById(submissionSSKey).getActiveSheet();
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[LoanType,borrower,amount,date,LienPosition,PropertyType]]);
// data returned is a blob for FileUpload widget
var fileBlob = e.parameter.thefile;
var fileBlob2 = e.parameter.thefile2;
//Grabs the folder to send upload files
var folder = DocsList.getFolderById('0B8PHKnfhErK-T2IzRW9ZWjcwRmc');
//Creates the upload file in root
var doc = DocsList.createFile(fileBlob);
var doc2 = DocsList.createFile(fileBlob2);
//moves created files in root to specific folder
doc.addToFolder(folder);
doc2.addToFolder(folder);
//Remove the copy left in the root, leaving only the version in the specific folder
doc.removeFromFolder(DocsList.getRootFolder());
doc2.removeFromFolder(DocsList.getRootFolder());
//Message to user after submit of form
var uplabel = app.createHTML('<B>Thank you for your Loan Registation Subumission. Press F5 on your keyboard to enter another Loan Registration.</B>');
//Send email to group
var emailAddress = 'email@email.com';
var folderURL = 'Folder URL';
var ssURL = 'SS URL';
var message = "<HTML><BODY>"
+ "<P>" + " A new Loan Registration has been submitted."
+ '<P>You can access the Loan Submitted documents <A HREF="' + folderURL + '">here</A>.'
+ '<P>You can access the submitted Loan Registration Spreadsheet <A HREF="' + ssURL + '">here</A>.'
+ "</HTML></BODY>";
MailApp.sendEmail(emailAddress, "New Loan Registrtion Submittal Posted!", "", {htmlBody: message});
app.add(uplabel);
return app;
}
EDIT - Added in second file upload and submit won't enable
I've gone back and edited the script and modified a bit to basically perform same function as before but this one needs to upload two files. I'm following the same code but after testing the submit button will never enable.. Here is the code that was updated:
//Create the Labels, TextBoxes, and Drop downs
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var Lender = app.createTextBox().setWidth('150px').setName('lender');
var correspondentBroker = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('correspondentbroker');
correspondentBroker.addItem('Select Option');
correspondentBroker.addItem('Correspondent');
correspondentBroker.addItem('Broker');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var loanprogram = app.createTextBox().setWidth('150px').setName('program');
var rate = app.createTextBox().setWidth('150px').setName('rate');
var ysp = app.createTextBox().setWidth('150px').setName('ysp');
var closingcostcredit = app.createTextBox().setWidth('150px').setName('credit');
var ltv = app.createTextBox().setWidth('150px').setName('ltv');
var impound = app.createListBox().setName('impounds').setWidth('120px').setName('impounds');
impound.addItem('Select Option');
impound.addItem('Yes');
impound.addItem('No');
var mortgageIns = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('mortgageinsurance');
mortgageIns.addItem('Select Option');
mortgageIns.addItem('MI');
mortgageIns.addItem('PMI Borrower Paid');
mortgageIns.addItem('PMI Lender Paid');
var upLoad = app.createFileUpload().setName('thefile');
var upLoad2 = app.createFileUpload().setName('thefile2');
var uploadtracker = app.createTextBox().setVisible(false);
var uploadtracker2 = app.createTextBox().setVisible(false);
var submitButton = app.createSubmitButton('<B>Submit</B>');
var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#FFcc99').setStyleAttribute('fontSize','20px');
//Click Handlers are set
var cliHandler2 = app.createClientHandler()
.validateLength(borrowerTextbox, 1, 40)
.validateLength(Lender, 1, 40)
.validateNotMatches(correspondentBroker,'Select Option')
.validateLength(loanAmountTextbox, 1, 40)
.validateLength(loanprogram, 1, 40)
.validateNotMatches(mortgageIns,'Select Option')
.validateLength(rate, 1, 40)
.validateLength(ysp, 1, 40)
.validateLength(closingcostcredit, 1, 40)
.validateLength(ltv, 1, 40)
.validateNotMatches(impound, 'Select Option')
.validateMatches(uploadtracker, 'selected')
.validateMatches(uploadtracker2, 'selected')
.forTargets(submitButton).setEnabled(true)
.forTargets(warning)
.setHTML('Now you can submit your form')
.setStyleAttribute('background','#99FF99')
.setStyleAttribute('fontSize','12px');
var cliHandler3 = app.createClientHandler().forTargets(uploadtracker).forTargets(uploadtracker2).setText('selected')
//Grid layout of items on form
grid.setText(0, 0, 'Borrower Name')
.setWidget(0, 1, borrowerTextbox)
.setText(1, 0, "Lender")
.setWidget(1, 1, Lender)
.setText(2, 0, 'Correspondent or Broker')
.setWidget(2, 1, correspondentBroker)
.setText(3, 0, 'Loan Amount')
.setWidget(3, 1, loanAmountTextbox)
.setText(4, 0, 'Loan Program')
.setWidget(4, 1, loanprogram)
.setText(5, 0, 'Rate')
.setWidget(5, 1, rate)
.setText(6, 0, 'YSP')
.setWidget(6, 1,ysp)
.setText(7, 0, 'Closing Cost Credit')
.setWidget(7, 1, closingcostcredit)
.setText(8, 0, 'LTV')
.setWidget(8, 1, ltv)
.setText(9, 0, 'Impounds')
.setWidget(9, 1,impound)
.setText(10, 0, 'Point File')
.setWidget(10, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
.setText(11, 0, 'Credit Report')
.setWidget(11, 1, upLoad2.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
.setWidget(12, 0, submitButton)
.setWidget(12, 1, warning)
.setWidget(13, 0, uploadtracker)
.setWidget(13, 1, uploadtracker2)
.addClickHandler(cliHandler2);
var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE DATA IS BEING UPLOADED TO Google Drive<B>').setStyleAttribute('background','yellow');
submitButton.addClickHandler(cliHandler).setEnabled(false);
panel.add(grid);
app.add(panel);
return app;
}
EDIT-to Add CliHandler4 I had update the code to reflect the 4th cliHandler but I'm still unable to active the submitbutton. Not sure why its failing.. I've looked it over several times and I can't seem to figure out what is wrong.. Here is the code
EDIT as answer : one widget was missing in the UI (mortgageIns)
var submissionSSKey = 'ID GOES HERE';
var Panelstyle = {'background':'#c0d6e4','padding':'100px','borderStyle':'ridge','borderWidth':'15PX','borderColor':'#31698a'}
function doGet(e) {
var app = UiApp.createApplication().setTitle('PCH Mortgage Disclosure Request');
app.add(app.createImage("http://www.pchmortgage.com/img/logo_thumbnail/6644.png"));
var instructLabel = app.createHTML('<B><p> </p><p>Be sure to fill in each field completely prior to submitting the Disclsure Request</P></B>');
app.add(instructLabel);
//Create the FormPanel and Grid for the application
var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(450, 300);
var grid = app.createGrid(15,2).setId('loanGrid');
//Create the Labels, TextBoxes, and Drop downs
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var lender = app.createTextBox().setWidth('150px').setName('lender');
var correspondentBroker = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('correspondentbroker');
correspondentBroker.addItem('Select Option');
correspondentBroker.addItem('Correspondent');
correspondentBroker.addItem('Broker');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var loanprogram = app.createTextBox().setWidth('150px').setName('program');
var rate = app.createTextBox().setWidth('150px').setName('rate');
var ysp = app.createTextBox().setWidth('150px').setName('ysp');
var closingcostcredit = app.createTextBox().setWidth('150px').setName('credit');
var ltv = app.createTextBox().setWidth('150px').setName('ltv');
var impound = app.createListBox().setName('impounds').setWidth('120px').setName('impounds');
impound.addItem('Select Option');
impound.addItem('Yes');
impound.addItem('No');
var mortgageIns = app.createListBox().setName('Correspondent Broker').setWidth('120px').setName('mortgageinsurance');
mortgageIns.addItem('Select Option');
mortgageIns.addItem('MI');
mortgageIns.addItem('PMI Borrower Paid');
mortgageIns.addItem('PMI Lender Paid');
var upLoad = app.createFileUpload().setName('thefile');
var upLoad2 = app.createFileUpload().setName('thefile2');
var uploadtracker = app.createTextBox().setVisible(false);
var uploadtracker2 = app.createTextBox().setVisible(false);
var submitButton = app.createSubmitButton('<B>Submit</B>');
var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#9999ff').setStyleAttribute('fontSize','20px');
//Click Handlers are set
var cliHandler2 = app.createClientHandler().validateLength(borrowerTextbox, 1, 40).validateLength(lender, 1, 40)
.validateNotMatches(correspondentBroker,'Select Option').validateLength(loanAmountTextbox, 1, 40).validateLength(loanprogram, 1, 40)
.validateLength(rate, 1, 40).validateLength(ysp, 1, 40).validateLength(closingcostcredit, 1, 40)
.validateLength(ltv, 1, 40).validateNotMatches(mortgageIns,'Select Option')
.validateMatches(uploadtracker, 'selected').validateMatches(uploadtracker2, 'selected')
.forTargets(submitButton).setEnabled(true).forTargets(warning).setHTML('Now you can submit your form')
.setStyleAttribute('background','#99FF99').setStyleAttribute('fontSize','12px');
var cliHandler3 = app.createClientHandler().forTargets(uploadtracker).setText('selected')
var cliHandler4 = app.createClientHandler().forTargets(uploadtracker2).setText('selected')
//Grid layout of items on form
grid.setText(0, 0, 'Borrower Name')
.setWidget(0, 1, borrowerTextbox)
.setText(1, 0, "Lender")
.setWidget(1, 1, lender)
.setText(2, 0, 'Correspondent or Broker')
.setWidget(2, 1, correspondentBroker)
.setText(3, 0, 'Loan Amount')
.setWidget(3, 1, loanAmountTextbox)
.setText(4, 0, 'Loan Program')
.setWidget(4, 1, loanprogram)
.setText(5, 0, 'Rate')
.setWidget(5, 1, rate)
.setText(6, 0, 'YSP')
.setWidget(6, 1,ysp)
.setText(7, 0, 'Closing Cost Credit')
.setWidget(7, 1, closingcostcredit)
.setText(8, 0, 'LTV')
.setWidget(8, 1, ltv)
.setText(9, 0, 'Impounds')
.setWidget(9, 1,impound)
.setText(10, 0, 'Mortgage Insurance')
.setWidget(10, 1,mortgageIns)
.setText(11, 0, 'Point File')
.setWidget(11, 1, upLoad.addChangeHandler(cliHandler3).addChangeHandler(cliHandler2))
.setText(12, 0, 'Credit Report')
.setWidget(12, 1, upLoad2.addChangeHandler(cliHandler4).addChangeHandler(cliHandler2))
.setWidget(13, 0, submitButton)
.setWidget(13, 1, warning)
.setWidget(14, 0, uploadtracker)
.setWidget(14, 1, uploadtracker2)
.addClickHandler(cliHandler2);
var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE DATA IS BEING UPLOADED TO GOOGLE DRIVE<B>').setStyleAttribute('background','yellow');
submitButton.addClickHandler(cliHandler).setEnabled(false);
panel.add(grid);
app.add(panel);
return app;
}
解决方案
One simple way to do it is to use another client handler with validators. I suggest to put it on the fileUpload like this : (replace in your code at the same place)
var cliHandler2 = app.createClientHandler().validateLength(loanAmountTextbox, 1, 20)
.validateLength(borrowerTextbox, 1, 20).validateLength(lienPos, 1, 20).forTargets(submitButton).setEnabled(true);// you can add more conditions here (widget name, minimum length, max length)
var upLoad = app.createFileUpload().setName('thefile').addChangeHandler(cliHandler2);
and this one enables the submit button! you can test it here
EDIT
Here is the more sophisticated option that checks all the widgets on client handler.... I reproduce the whole relevant part and update the online example - EDIT3 : the DateBox validation doesn't work, that's an issue we'll have to go through ! in the mean time I added a new message handling on the same handler
EDIT 4 : (last one !)
I finally found a working solution for each widget type, the date must contain a '2' (which will be true for a couple of years I think ;-) I show the whole doGet function because I made some other changes here and there... It works best when the fileUpload widget is filled in last position (don't know why) and in certain situations one need to re-modify a textBow to get the validation but in most cases it's working as it should.
function doGet(e) {
var app = UiApp.createApplication().setTitle('Loan Registration Processing');
var panel = app.createFormPanel();
var grid = app.createGrid(8,2).setId('loanGrid');
var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
loanList.addItem('Select Option');
loanList.addItem('FHA');
loanList.addItem('Convential');
loanList.addItem('VA');
loanList.addItem('Reverse');
loanList.addItem('HELOC');
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var appDatebox = app.createDateBox().setWidth('150px').setName('date');
var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
lienPos.addItem('Select Option');
lienPos.addItem('1st');
lienPos.addItem('2nd');
var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
propType.addItem('Select Option');
propType.addItem('1-4');
propType.addItem('Manufactured');
var submitButton = app.createSubmitButton('<B>Submit</B>');
var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#FFcc99').setStyleAttribute('fontSize','20px');
//file upload
var upLoad = app.createFileUpload().setName('thefile');
var cliHandler2 = app.createClientHandler()
.validateLength(borrowerTextbox, 1, 40).validateLength(loanAmountTextbox, 1, 40).validateNotMatches(loanList,'Select Option')
.validateNotMatches(lienPos,'Select Option').validateNotMatches(propType, 'Select Option').validateMatches(appDatebox, '2','g')
.validateNotMatches(upLoad, 'FileUpload').forTargets(submitButton).setEnabled(true).forTargets(warning)
.setHTML('Now you can submit your form').setStyleAttribute('background','#99FF99').setStyleAttribute('fontSize','12px')
//Grid layout of items on form
grid.setText(0, 0, 'Loan Type')
.setWidget(0, 1, loanList.addClickHandler(cliHandler2))
.setText(1, 0, "Borrower's Name")
.setWidget(1, 1, borrowerTextbox.addKeyUpHandler(cliHandler2))
.setText(2, 0, 'Loan Amount')
.setWidget(2, 1, loanAmountTextbox.addKeyUpHandler(cliHandler2))
.setText(3, 0, 'Loan Date')
.setWidget(3, 1, appDatebox)
.setText(4, 0, 'Lien Position')
.setWidget(4, 1, lienPos.addClickHandler(cliHandler2))
.setText(5, 0, 'Property Type')
.setWidget(5, 1, propType.addClickHandler(cliHandler2))
.setText(6, 0, 'File Upload')
.setWidget(6, 1, upLoad.addChangeHandler(cliHandler2))
.setWidget(7, 0, submitButton)
.setWidget(7, 1, warning);
var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE DATA IS UPLOADING<B>').setStyleAttribute('background','yellow');
submitButton.addClickHandler(cliHandler).setEnabled(false);
panel.add(grid);
app.add(panel);
return app;
}
这篇关于对字段和FileUpload进行表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
