jquery - HTML5 form validation and file upload in Google Apps Script HTML Service -

i'm developing gas using html service , running roadblock. i'm trying

1. create can add data form elements (i.e., name , email) google sheet
2. the form upload file specific google drive
3. before 1 , 2, form should validate input based on html5

here's (almost) working code:

code.gs

function doget(e) {     return htmlservice.createhtmloutputfromfile('index.html'); }  function uploadfiles(form) {     try {     var ssid = '-------ssid-------';     var dropboxid = '-------driveid-------';     var folder = docslist.getfolderbyid(dropboxid);      var blob = form.myfile;          if ( boolean(blob) ) {         var file = folder.createfile(blob);         file.setdescription("uploaded " + form.myname);     }  var sheet = spreadsheetapp.openbyid(ssid).getsheets()[0]; var lastrow = sheet.getlastrow(); var targetrange = sheet.getrange(lastrow+1, 1, 1, 3).setvalues([[ form.myname, form.mymail, file.geturl() ]]); return "file uploaded successfully"+ file.geturl() + file.getname();      } catch (error) {         return error.name + ' on line: ' + error.linenumber + ' -> ' + error.message;     } } 

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- can include own css styles --> <style>     form { margin: 40px auto; }     input { display:block; margin: 20px; } </style>  <!-- actual html form --> <!--form id="myform" onsubmit="rungas(this)"--> <form id="myform" onsubmit="return google.script.run     .withsuccesshandler(fileuploaded)     .uploadfiles(this.parentnode);">      <!-- text input fields -->     <input type="text" name="myname" id="myname" placeholder="your name.." required />     <input type="email" name="mymail" id="mymail" placeholder="your mail.." required />     <!-- file input filed -->     <input type="file" name="myfile" id="myfile" required />     <!-- submit button. calls server side function uploadfiles() on click -->     <input type="submit" value="run onclick"             onclick="this.value='uploading..';                     google.script.run.withsuccesshandler(fileuploaded)                     .uploadfiles(this.parentnode);                     return false;">     <input type="submit" value="run gas function"> </form> <script>  function rungas( argthis ) {     var n = $( "#myname" ).val();     var f = document.getelementbyid("myfile");     // var g = $( "myfile" ).val();     if( boolean(n) ) {         document.getelementbyid('output').innerhtml = "ok" + n + "js: " + f;         google.script.run.withsuccesshandler(fileuploaded)         .uploadfiles( argthis );         document.getelementbyid('output').innerhtml = e.name + 'on line:' + e.linenumber + '->' + e.message;     }     return false; }  </script>  <!-- here results of form submission displayed --> <div id="output"></div>  <!-- function called after google script has executed --> <script>     function fileuploaded(status) {         document.getelementbyid('myform').style.display = 'none';         document.getelementbyid('output').innerhtml = status;     } </script> 

i've came across many suggestions:

1. many tutorial won't deal file upload (only sheet) call directly submit button, bypass html5 validation. example of first submit button name "run onclick."
2. after searching, found trigger html5 validation (here's link html5 form validation html service), case of submit button titled "run onclick," should move gas function call form element, doing triggering html5 validation, but weird thing happen gas won't , url generate typical get form values (e.g., https://script.google.com/a/macros/----/s/---------/dev?myname=va&mymail=vas%40au.edu&myfile=imgname.jpg)
3. another solution, suggest can use jquery catch form submit trigger gas function call when requirements (validation) met. gives same result 2. me. gas run, comes page without passing actual values.

any solution appreciated.

edit 12/19/2014

<script> window.rungas = function() {   // jquery style   window.form = $( "#myform" );   // or js    window.form = document.getelementbyid('myform');    google.script.run   .withsuccesshandler(fileuploaded)   .uploadfiles(form);   return false; } </script> 

i tried sandy has suggested, omit passing value in function call onsubmit in form element. firing html5 validation. figured have find ways pass form object (not individual form values) code.gs, pass form object through gas function run.

if use jquery style, javascript console reports untaming of guest constructed objects unsupported: [object object].

if use getelementbyid, run same problem, generates style url pair of name=value , comes index.html without "performing" code.gs functions. note "seems" go through code.gs somehow (i.e., if place syntax error, report during process) doesn't supposed in onclick.

the way, far, work use onclick, not onsubmit, not calling intermediary gas tag. bypasses html5 validation.

i have no clue here...

here how configure form html service:

<form id="myinputform" name="input" onsubmit="writeinput()"> 

i don't run onsubmit="return google.script.run in form. think ran same or similar problems having. so, form runs javascript function writeinput() when form submitted. javascript function in script tag runs google.script.run. that's works me. when set way, input fields have required setting keep form being submitted.

<script>   window.writeinput = function() {     window.myinputvalue = document.getelementbyid('idmyinputid').value; //get input value     google.script.run   } <script> 

you should have data validation on both front , end. hackers might able find way send own data .gs, server side code. if choose either validation on front in, client side, or end, server side, i'd go server side validation. far getting msg user if did data input wrong, client side check better, it's not more secure.

you're asking question personal preference, or matter of opinion. use javascript in html value out of input field.

window.variablename = document.getelementbyid('id_name').value; 

that line of code gets value out of form input field, , variable. can send variable .gs file.

google.script.run.withfailurehandler(onfailure)       .withsuccesshandler(savedlst)       .writeinputdata(variablename); 

the above code in html. function writeinputdata in .gs script file.

you can check variable variablename validation before calling writeinputdata function.

if (variablename === "") {   alert("missing input");   return false; } else {   google.script.run.withfailurehandler(onfailure)     .withsuccesshandler(savedlst)     .writeinputdata(variablename); }; 

there other ways front end data validation. can combine methods. if find error can't fix, post error message , line coming from.

to print information html use: console.log("some text here: " + variablename); print console of browser. open developer tools, , console see has been printed browsers console. not confused logger.log() prints server side apps script log.