javascript - 在电子表格的 html 表单上添加所需的输入

问题描述

我正在尝试在谷歌电子表格上制作 HTML 表单，问题是“必需”属性不起作用。

目前，当我提交表单时，唯一需要的字段是单选输入“类型”。我希望所有输入都是必需的，并且如果其中一个字段为空，则防止提交表单。

如果有人可以检查我的错误，那就太好了。谢谢！

这是我的html：

<!doctype html>

<html lang="fr">

  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">   
  
  </head>
  
  <body>
<div class="container"> 

<h3 class="display-4 mb-3">Nouvelle Transaction</h3>

<div class="userform">


  <div class= row>

    <div class="col">
      <label for="date">Date</label>
      <input type="date" class="form-control" id="date1" required>
    </div>



    <div class="col">
    <label for="client1">Client</label>
    <select class="form-control" id="client1" value="" required>
    </select>
  </div>

</div>


<label class ="mt-4" for="type">Type</label>
<div class="form-group">
  <div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="credit" name="type" class="custom-control-input" value="achat"required>
  <label class="custom-control-label" for="credit">Achat</label>
</div>

<div class="custom-control custom-radio custom-control-inline ml-3">
  <input type="radio" id="debit" name="type" class="custom-control-input" value="paiement">
  <label class="custom-control-label" for="debit">Paiement</label>
</div>
</div>

 <!-- Bootstrap CSS -->
 <label for="date">Montant</label>

<div class="mb-3 input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">€&lt;/span>
  </div>
  <input type="number" step="any" class="form-control rounded-right" id="montant1" required>
</div>

    
    
    
    <button class="btn btn-primary mt-3" id="mainButton">Valider</button>
  
    
   
</div>
</div>
   
    

    
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 <script>
 
 
 function validationBouton(){
    
    if(validate()){
    
    var date11 = document.getElementById("date1");
    var client11 = document.getElementById("client1");
    var type11 = document.querySelector('input[name="type"]:checked').value;
    var montant11 = document.getElementById("montant1");
    
    var rowData = {date1 : date11.value,client1 : client11.value,type1 : type11,montant1 : montant11.value};
    google.script.run.withSuccessHandler(afterValidate).addNewRow(rowData);
    }  else {

    //later
    //$('#errorNotification').toast('show');
    
    }
    
    }
    
    function afterValidate(e){
      var date11 = document.getElementById("date1");
      var client11 = document.getElementById("client1");
      var type11 = document.querySelector('input[name="type"]:checked');
      var montant11 = document.getElementById("montant1");
      
      date11.value = "";
      client11.value = "";
      type11.checked = false;
      montant11.value = "";
      
      //$('#successNotification').toast('show');
    }
    
    
    function validate(){
      var champsAValider = document.querySelectorAll("#userform input");
      return Array.prototype.every.call(champsAValider,function(el){
         return el.checkValidity();
      
      });
    
    }

    
    document.getElementById("mainButton").addEventListener("click",validationBouton);
    
 </script>



</body>
</html>

标签： javascripthtmlformsspreadsheet

您需要该form元素告诉浏览器查看字段以验证它们。单击提交时表单会消失，因为从技术上讲应该有一个操作属性。

要覆盖默认行为，请onsubmit在表单标记中包含该属性，该属性告诉它在单击表单上的提交按钮时运行哪个函数。

尝试在不输入任何内容的情况下单击提交按钮，然后输入信息并测试表单是否不会消失，如下例所示。

<!DOCTYPE html>
<html>
<body>

<form onsubmit="return myFormHandler();">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="submit">
</form>

</body>

<script>
function myFormHandler(){
  return false;
}
</script>
</html>

javascript - 在电子表格的 html 表单上添加所需的输入

问题描述

解决方案

推荐阅读