google apps script - Form Validation Before Submission -
i can't form validate before submitted spreadsheet. once click submit nothing...
i not sure how validate date make sure in correct format before submission. have tried setup validation before can test it, have able submit , validation results.
what doing wrong? have included code below:
function doget() { var app = uiapp.createapplication().settitle('dhs: kurzweil calendar'); //create panel holds 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 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(); (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 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 0 , 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(); (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(); (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(); (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 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 handler button btnvalidate.addclickhandler(valsubmit); //add elemnts 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 panel application app.add(vrtmainpanel); //return 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 entered 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 execute 'createevents(e)' on clicking 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 panel holds form elelemnts var vrtmainpanel = app.createverticalpanel().setid('vrtmainpanel'); var lblsuccess = app.createlabel('check information below, if looks correct may confirm event...').setname('lblsuccess').setid('lblsuccess').setvisible(false); var lblnosuccess = app.createlabel('there issues creation of event... click back, , make 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 handler button var evthandler = app.getelementbyid('evthandler'); btncreate.addclickhandler(evthandler); //add elemnts 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 panel application app.add(vrtmainpanel); //return application return app; }
i've been spending lot of time on form validation , ended 2 possible solutions work pretty since can't decide 1 best use first... , second...
i'll show idea of both solution, make choice.
- the 'logical' 1 : use client validation enable submit button , few other client handler validations show/hide warning labels near fields have filled. works great must admit can tricky write script , needs quite lot of code. (see examples in these post among others : form validation on fields , fileupload
form validation using client handler : why input sequence order change result? - use server handler did in code replace "createevent" button intermediate button instead of sending directly event creation function calls "fake" function shows summary of requested data in html widget nice looking presentation , button 1 use confirm event creation (and create event) making sort of 2 steps confirmation user friendly. (and includes way go 1 step change/append submitted data.
both solution said have pro , cons, second 1 easier write script it.
feel free comment and/or ask further details if references mentioned not clear enough.
edit : here an example of 2cond approach , spreadsheet included script (read only, make copy view/edit script , change spreadsheet id in script if want run own version)) instructions in french shouldn't hard translate ... sorry :-) ss has marter sheet can define question in form , script generates custom form. there tools count responses, print log sheet per day , send confirmation emails.
Comments
Post a Comment