Html服务中的表单验证和输入字段类型文件 [英] Form validation and input field of type file in Html Service

问题描述

我打算使用HTML服务应用程序脚本将标准html5表单验证（使用必需的属性和提交按钮）放在具有文件输入字段的表单中。

我的问题是使用提交按钮将blob文件传递到apps脚本函数。如果我把一个正常的按钮，我失去了html5的标准验证。如果我使用提交按钮，则不会将任何内容传递到具有google.script.run语句的apps脚本函数。 示例使用普通按钮，但这样我就无法对所需字段使用表单验证。

我该如何处理？由于现在我必须使用提交按钮和onclick事件，并且在需要插入字段的情况下（在由按钮调用的应用程序脚本函数中）手动检查。

解决方案

将您的代码放在onSubmit表单事件上，并确保以返回false结束onSuccessHandler函数。 b
$ b

 < script> 
函数updateUrl（url）{
 var div = document.getElementById（'output'）; 
 div.innerHTML ='< a href ='+ url +'>知道了！< / a>'; 
返回false; 
} 
< / script> 
 
 onSubmit =return google.script.run 
 .withSuccessHandler（updateUrl）
 .processForm（this.parentNode）;> 
< input required name =myFiletype =file/> 
< input type =buttonvalue =Submit/> 
< / form> 
< div id =output>< / div> 
  

i'm tring to put together standard html5 form validation (using required attribute and a submit button) in forms with "file" input fields using the HTML service apps script.

My problem is passing blob files to the apps script function using a submit button. If i put a normal button i lose the standard validation of the html5. If i use a submit button nothing is passed to the apps script function with the "google.script.run" statement.

The example of the tutorial use a normal button, but in this way i cannot use form validation for required fields.

How i can handle this? Since now i had to use a submit button and the onclick event, and checked manually if required fields were inserted (in the apps script function called by the button).

解决方案

Put your code on the onSubmit form event and be sure to end the onSuccessHandler function with return false.

<script>
    function updateUrl(url) {
         var div = document.getElementById('output');
         div.innerHTML = '<a href="' + url + '">Got it!</a>';
         return false;
    }
</script>
<form id="myForm"
  onSubmit="return google.script.run
    .withSuccessHandler(updateUrl)
    .processForm(this.parentNode);">
 <input required name="myFile" type="file" />
 <input type="button" value="Submit" />
</form>
<div id="output"></div>

这篇关于Html服务中的表单验证和输入字段类型文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！