仅当表单完成时才运行.google.script

Question

我试图使用谷歌脚本创建一个表单，除非输入所有字段，否则不允许提交。目前，我使用"onclick"命令来运行一个谷歌脚本，将表单数据和文件发送到我的谷歌驱动器。但是，我只希望在填写了某些字段(标记为必需的字段)的情况下提交表单。如果我从提交按钮的"onclick"部分删除google.script.run命令，那么表单就会创建警告/消息，告诉用户必须填写所需的表单。当包含google.script.run命令时，这些消息不会出现。我还没有找到一种方法来使google.script.run命令只在所有字段都完成时运行。

<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- You can also include your own CSS styles -->
<style>
  form { margin: 40px auto; }
  input { display:inline-block; margin: 20px; }
</style>
<form id="myForm" name="myForm">
  <label for="myFirstName"> First Name *</label>
  <input type="text" name="myFirstName" placeholder="First name" style="width: 150px;" required>
  <fieldset>
  <legend> Personal Information </legend>
  <div class="inline form-group">
  </div>
  <div class="inline form-group">
  <label for="myLastName"> Last Name* </label>
  <input type="text" name="myLastName" placeholder="Last Name" style="width: 150px;" required>
  </div>
  <div class="inline form-group">
  <label for="myEmail"> Email* </label>
  <input type="email" name="myEmail" placeholder="" style="width: 150px;" required>
  </div>
  <div class="inline form-group">
  <label for="visa"> Check if you will require visa assistance. Otherwise, ignore. </label>
  <input type="checkbox" name="visa" value="Yes">
  </div>
  </fieldset>
  <fieldset>
  <legend> Documents </legend>
  <div class="inline form-group">
  <label for="CV"> CV* </label>
  <input type="file" name="CV" required>
  </div>
  <div class="inline form-group">
  <label for="CoverLetter"> Cover Letter </label>
  <input type="file" name="CoverLetter">
  </div>
  </fieldset>
<p>  </p>
<input id="submitbutton" type="submit" style="margin-left:450px" value="Submit Application" 
       onclick="this.value='Submitting...';          
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
       return false;">
</form>
<div id="output"></div>
<script>
  function fileUploaded(status) {
      document.getElementById('myForm').style.display = 'none';
      document.getElementById('output').innerHTML = status;
  }
</script>
<style>
 input { display:block; margin: 20px; }
</style>

google脚本运行良好。我还注意到一些关于表单验证的类似问题。谷歌脚本特定的不使用相同的形式格式(他们创建的形式在谷歌脚本)。我想做尽可能小的改变，以实现所需的功能。

如有任何帮助，不胜感激。

---

jquery当前代码:

 $('#submitbutton').on('click', function() {
    $(this).val("Validating...");
    //check for required fields
    var emptyFields = $('[required]').filter(function() {
       $(this).removeClass("warning");
       if ($(this).val().length === 0){
         $(this).addClass("warning")
         return true
       } else {
         return false
       }
   });
   if (emptyFields.length === 0) {
            google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
    } else{
       $(this).val("Submit Application")
    }
});

Answer 1

在消息出现之前，您的表单正在提交。处理此问题的一种方法是将按钮更改为按钮(而不是键入submit)，然后在单击时触发事件。检查您的验证，如果一切通过，提交您的表单。

的例子:

将按钮更改为:

<input id="submitbutton" type="button" style="margin-left:450px" value="Submit Application" >

和点击事件:

$('#submitbutton').on('click', function() {
   $(this).val("Validating...");
   //check for required fields
   var emptyFields = $('[required]').filter(function() {
       $(this).removeClass("warning");
       return $(this).val().length === 0;
   });
   if (emptyFields.length > 0) {
       emptyFields.addClass("warning");
    } else {
       google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
       $('#myForm').submit();
    }
});

CSS

和

.warning {border: 1px solid red; }