Блог

Главная - Вопросы по программированию - Добавление необходимых входных данных в html-форму электронной таблицы

Добавление необходимых входных данных в html-форму электронной таблицы

#javascript #html #forms #spreadsheet

#javascript #HTML #формы #электронная таблица

Вопрос:

Я пытаюсь создать HTML-форму в электронной таблице Google, проблема в том, что атрибут «required» не работает.

В настоящее время, когда я отправляю форму, единственным требуемым полем является радиовход «тип». Я хочу, чтобы все входные данные были обязательными и чтобы форма не отправлялась, если одно из полей пусто.

Было бы неплохо, если бы кто-нибудь мог проверить, в чем моя ошибка. Спасибо!

Вот мой 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">€</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>

скриншот формы

Комментарии:

1. У вас слишком много кода. Упростите это, и вы можете получить ответ

2. Вы также должны обернуть код, содержащий все поля ввода в <form></form>

3. Спасибо за ваш ответ. @SteveTomlin Я удалил ненужные строки

4. @S.Ramjit когда я обертываю его в <form>, форма исчезает при ее отправке

Ответ №1:

Вам нужен 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>