確認輸入的所有輸入總計等於100

Question

我有一個包含6個輸入框的表單。我想驗證用戶是否填寫了每個輸入的數字，並且數字總共爲100。我有一個函數可以驗證數字總數是否超過100，但是如何驗證數字小於100？現在，在輸入所有值之前，我會收到一條錯誤消息。

HTML

<fieldset>  
    <input type="text" name="qty" id="qty1" oninput="findTotal()" class="hvr-pop" required/>       
    <input type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>       
    <input type="text" name="qty" id="qty3" oninput="findTotal()" class="hvr-pop" required/>       
    <input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>        
    <input type="text" name="qty" id="qty5" oninput="findTotal()" class="hvr-pop" required/>        
    <input type="text" name="qty" id="qty6" oninput="findTotal()" class="hvr-pop" required/>   
</fieldset>  
<output type="text" name="total" id="total" class="hvr-pop" readonly placeholder="Must total 100"></output> 

的JavaScript

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."); 
       $("input").focus(function() { 
        $(this).css("border-color", "red").val(""); 
       }); 
       $('#form1').find('#total').val(''); 
       return false; 
      } 
    }  

Answer 1

正如@Aaron上面提到的，你可以簡單地將greater than標誌更改爲does not equal標誌，如果你要治療均小於或大於100同樣的方式：

<fieldset>  
 
    <input type="text" name="qty" id="qty1" oninput="findTotal()" class="hvr-pop" required/>       
 
    <input type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>       
 
    <input type="text" name="qty" id="qty3" oninput="findTotal()" class="hvr-pop" required/>       
 
    <input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>        
 
    <input type="text" name="qty" id="qty5" oninput="findTotal()" class="hvr-pop" required/>        
 
    <input type="text" name="qty" id="qty6" oninput="findTotal()" class="hvr-pop" required/>   
 
</fieldset>  
 
<output type="text" name="total" id="total" class="hvr-pop" readonly placeholder="Must total 100"></output> 
 

 
<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."); 
 
       $("input").focus(function() { 
 
        $(this).css("border-color", "red").val(""); 
 
       }); 
 
       $('#form1').find('#total').val(''); 
 
       return false; 
 
      } 
 
    } 
 
</script>

然而，正如我所說，這是一個不好的用戶體驗，因爲驗證正在發生的每有人進入一個值的輸入時間，這意味着他們將不得不解僱多個警報窗口正好填補了所有的輸入。相反，您應該點擊按鈕進行驗證，或者至少在驗證之前等待所有輸入都有值。

Answer 2

爲了達到預期的結果，下面添加如果條件

if (tot < 100 && arr[5].value) { 
    alert("Please make sure numbers total 100"); 
    for (i = 0; i < arr.length; i++) { 
     arr[i].value = null; 
    } 
    } 

HTML：

<fieldset>  
    <input type="text" name="qty" id="qty1" oninput="findTotal()" class="hvr-pop" required/>       
    <input type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>       
    <input type="text" name="qty" id="qty3" oninput="findTotal()" class="hvr-pop" required/>       
    <input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>        
    <input type="text" name="qty" id="qty5" oninput="findTotal()" class="hvr-pop" required/>        
    <input type="text" name="qty" id="qty6" oninput="findTotal()" class="hvr-pop" required/>   
</fieldset>  
<output type="text" name="total" id="total" class="hvr-pop" readonly placeholder="Must total 100"></output> 

JS：

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."); 
       $("input").focus(function() { 
        $(this).css("border-color", "red").val(""); 
       }); 
       $('#form1').find('#total').val(''); 
       return false; 
      } 

if (tot < 100 && arr[5].value) { 
    alert("Please make sure numbers total 100"); 
    for (i = 0; i < arr.length; i++) { 
     arr[i].value = null; 
    } 
    } 



    } 

http://codepen.io/nagasai/pen/yJWoLA