突出顯示空輸入字段

我有一個用戶輸入數字的表單。點擊時會調用一個函數。我想突出顯示並清空任何無效字段（不是數字）。到目前爲止，它突出顯示並清除所有輸入。我只需要那些沒有填寫的，或者輸入不是數字的。突出顯示空輸入字段

\t function validatefilledIn() { 
 
\t \t "use strict"; 
 
\t \t var arr = document.getElementsByName('qty'); 
 
\t \t var score = document.getElementById('total'); 
 
\t \t 
 
\t \t for(var i=0; i<arr.length;i++){ 
 
\t \t \t if(isNaN(parseInt(arr[i].value))) { 
 
\t \t \t \t 
 
\t \t \t \t alert("Please make sure all the fields are filled in."); 
 
\t \t \t \t $('input').val('').css("border-color", "red"); 
 
\t \t \t \t $('#form1').find('#total').val(''); 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t } 
 
\t }

  <form name="myForm" id="form1"> 
 
       <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> 
 
</form>

來源

2016-08-17 invincibleme

您計劃如何與服務器名稱相同的字段之間的區別？ –

你有什麼建議？我認爲它可以通過函數中的名字循環。 – invincibleme

我是否需要更改我的問題？不知道該怎麼辦。 – invincibleme

隨着if(isNaN(arr[i].value) || arr[i].value == "")它的工作！

function validatefilledIn() { 
    var arr = document.getElementsByName('qty'); 
    for(var i=0; i<arr.length;i++){ 
     if(isNaN(arr[i].value) || arr[i].value == "") { 
      $(arr[i]).val('').css("border-color", "red"); 
     } 
    } 
}

HTML全文：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      function findTotal() { 
      } 
      function validatefilledIn() { 
       var arr = $("[name='qty']"); 
       $.each(arr, function(i, o) { 
        if(isNaN($(o).val()) || $(o).val() == "") { 
         $(o).val('').css("border-color", "red"); 
        } else { 
         $(o).css("border-color", "green"); 
        } 
       }); 
      } 
     </script> 
     <form name="myForm" id="form1"> 
      <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> 
      <button onClick="validatefilledIn()">Check</button> 
     </form> 
    </body> 
</html>

來源

2016-08-17 15:37:29 petres

謝謝佩特雷斯，但它仍然選擇所有輸入。我只想在空白的邊框上添加一個紅色邊框。 – invincibleme

'''$（'input'）'''會選擇所有的輸入，所以你也只需要選擇那些數據不好的。 – petres

是的，這是我不知道該怎麼做的，選擇那些輸入錯誤的。我試過 $（arr [i]）.val（''）.css（「border-color」，「red」）;但它返回唯一的第一個輸入框，而不是空的。謝謝你的幫助！ – invincibleme

突出顯示空輸入字段

回答

相關問題