Javascript Formular Validierung insgesamt 100

Ich muss das Formular unten validieren, um sicherzustellen, dass die Summe aller Eingaben genau 100 und nur Zahlen ist. Bisher kann ich bestätigen, ob es über 100 ist. Aber wenn ich versuche, unter 100 zu validieren, erhalte ich die Warnung, bevor alle Werte eingegeben sind.Javascript Formular Validierung insgesamt 100

<form name="myForm" id="form1"> 
       <input oninput="findTotal()" type="text" name="qty" id="qty1" class="hvr-pop"/> <br> 
      <input oninput="findTotal()" type="text" name="qty" id="qty2" class="hvr-pop"/> <br> 
      <input oninput="findTotal()" type="text" name="qty" id="qty3" class="hvr-pop"/> <br> 
       <input oninput="findTotal()" type="text" name="qty" id="qty4" class="hvr-pop"/> <br> 
       <input oninput="findTotal()" type="text" name="qty" id="qty5" class="hvr-pop"/><br> 
      <input oninput="findTotal()" type="text" name="qty" id="qty6" class="hvr-pop"/><br> 


      <textarea type="text" name="total" id="total" class="hvr-pop" readonly placeholder="Must total 100"></textarea> 
     </form> 


<script> 
    function findTotal(){ 
      "use strict"; 
      var arr = document.getElementsByName('qty'); 
      var tot=0; 
      for(var i=0; i<arr.length;i++){ 
       if(parseInt(arr[i].value)) { 
        tot += parseInt(arr[i].value); 

        } 
       } 
      } 

      document.getElementById('total').value = tot; 



      // check that weightage scores = 100 

      if (tot > 100) { 
        alert("Please make sure numbers total 100"); 
        document.getElementByName("qty").value = null; 

        return false; 
       } 


     } 

    <script>

Quelle

2016-07-27 invincibleme

Zwei Möglichkeiten, dies zu verhindern: 1. am Anfang des 'findTotal Put in if-Anweisung()', die die Funktion, wenn eine 'qty' Eingabe beendet ist leer. 2. Lassen Sie findTotal() von einem Klick auf die Schaltfläche laufen, auf den Sie nach Eingabe aller '' '' '' '' klicken können. – neilsimp1

Danke, ja ich dachte an Option 2, aber es ist nicht optimal. Ich denke, Option 1 würde nicht funktionieren, da der Benutzer Werte eingibt, findTotal() fügt jeden hinzu. Es wird leere Werte geben, wenn es berechnet – invincibleme

In diesem Fall, überprüfen Sie einfach, wenn einer der Eingänge leer ist, während Sie durch sie durchlaufen und ein Flag setzen. Nach der Schleife, wenn das Flag wahr ist, return/do not call 'alert()' – neilsimp1

let total = [...document 
    .getElementById('form1') 
    .querySelectorAll('input')] 
    .reduce((acc, el) => acc += parseInt(el.value, 10), 0) 

if (total !== 100) 
    return console.warn('total inputs not 100')

Quelle

2016-07-27 18:43:12

Würde ich "document.getElementById ('total') ersetzen. Value = tot; // Überprüfen Sie, ob die Gewichtungsergebnisse = 100 sind if (tot> 100) { alert ("Bitte stellen Sie sicher, Zahlen insgesamt 100"); document.getElementByName ("Menge") Wert = null;. return false;} “mit dem, was Sie oben haben? – invincibleme

Während dieses Code-Snippet die Frage lösen kann, hilft [einschließlich einer Erklärung] (// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) wirklich, die Qualität Ihres Posts zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in der Zukunft beantworten, und diese Leute könnten die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch nicht, Ihren Code mit erläuternden Kommentaren zu überladen, da dies die Lesbarkeit sowohl des Codes als auch der Erklärungen verringert! – FrankerZ

Javascript Formular Validierung insgesamt 100

Antwort

Verwandte Themen