HTML5 Form Validation With Html Service

I'm trying to use HTML5 form validation when using Google Apps Script HTML Service. As another user asked, according to the documentation example, you must use a button input inste

Solution 1:

Move the function call to the <form> element; remove any function call from the submit input element; and put intermediary JavaScript code into a <script> tag:

<input tabindex="9" type="submit" value="Save Input" id='idInputBtn'>


<form id="myInputForm" name="input" onsubmit="fncWriteInput(this)">

<script>
  window.fncWriteInput= function(argTheInfo) {
  // Do additional checks here if you want
  var everythingIsOk = . . . . . . . ;

  if (everythingIsOk) {
    google.script.run
      .withSuccessHandler(openDocument)
      .generateDocument(argTheInfo);
    };
  };

Notice that this.parentNode gets removed to the arg of the function call, and just use this in the function argument because the function is getting called from the <form> element, which is the parent.

If there are any errors, the form will not be submitted, and the user will get a msg that something was wrong. No code will run.

This is pseudo code, but I do use a set up like this in my application. But use developer tools and you can put a break point right in your browser and step through every line to test it without needing to put in console.log statements.

Solution 2:

I know this has been a long time on this answer, but there's a simple solution that I found:

"<input type='submit' onclick='if(verifyForm(this.parentNode)===true){google.script.run.withSuccessHandler(YOUROUTPUT).YOURFUNCTION(this.parentNode); return false;}' value='Submit'></form>";

Javascript side

 function verifyForm(){
  var elements = document.getElementById("myForm").elements;
  for (var i = 0, element; element = elements[i++];) {
    if (element.hasAttribute("required") && element.value === ""){
      resetInputs();
      return false;
    }
    if (element.hasAttribute("pattern")){
      var value = element.value;
      if(value.match(element.pattern)){
      }else{
        resetInputs();
        return false;
      }
    }
   }
   return true;
}

Calling the window has issues in iOS sometimes, which is why I investigated this further.