如果輸入值爲空，更改邊框顏色

我想要做的是同時更改所有輸入文本邊框的顏色，如果它/它們在單擊按鈕時有空值或無值，我有一個函數可以執行這個。首先我把我想要檢查值的輸入文本放到一個數組中，然後調用函數在其中循環數組並檢查空值。在按鈕單擊時，如果我的所有輸入文本都爲空，它將只會更改數組中第一個索引的顏色。如果輸入值爲空，更改邊框顏色

這裏是我的功能：

function isValid(array){ 
      for(var x=0;x<array.length;x++){ 
       if (array[x].value.trim() == ""){ 
        $(array[x]).css("border-color","#FF0000"); 
        return false; 
       } 
      } 
     }

這是我打電話給我的功能：

var array = [document.getElementById('txtLastName'), 
      document.getElementById('txtFirstName') 
      ]; 
if (!isValid1(array)) { 
return false; 
    }

如何改變所有輸入的邊框顏色與空值數組中？謝謝！

來源

2013-08-05 QKWS

而你的問題是......？ –

如何使用空值更改數組中所有輸入的邊框顏色 – QKWS

在循環中更改爲（var x = 0; x <= array.length; x ++）{} –

這裏是我的兩個美分，可能需要調整：

function isValid(selector){ 
    return ($(selector).filter(function() { 
     return (this.value.trim() === ""); 
    }).css("border-color","#FF0000").length === 0); 
}

要使用它：

isValid("#txtLastName, #txtFirstName");

我建立呼叫者的CSS選擇器並傳遞給它isValid()，您可能已通過陣列["txtFirstName", "txtFirstName"]並在isValid()中構建選擇器。

有很多方法可以做到這一點，更多的模塊化方法是使用nullValidate類作爲選擇器，因此您可以擁有儘可能多的驗證字段。

編輯：如果無效元素被發現

來源

2013-08-05 05:07:17 leesei

我忘了提及，如果存在空值，我需要返回false。我可以在哪裏添加？ – QKWS

你是什麼意思的空值？ '''值的默認值是''「'（或'value'屬性中指定的值）並且不會是'null'。 – leesei

或者您希望函數能夠幫助跟蹤是否有空值？我做了編輯，你可以檢查isValid（）'return的真實性。 – leesei

爲什麼混合使用jQuery和vanilla JS ..只能用filter方法。

$('#txtLastName, #txtFirstName').filter(function() { 
    return $.trim(this.value) === ''; 
}).css("border-color","#FF0000");

此外，您編寫代碼的方式沒有任何問題。

你一定沒有使用正確的ID最有可能。

Your Code

JQuery Code

來源

2013-08-05 05:00:32

回報只是我的2美分的價值

<form name="form"> 
<input type="text" name="firstname" /> 
<input type="button" name="submit_btn" value="send" /> 
</form> 


$(document).ready(function(){ 

$('input[type="text"]').keyup(function(){ 
    var length = $('input[type="text"]').val().length; 
    if(length===0){ 
     $(this).css({"border":"1px solid red"}); 
    } 
    else { 
     $(this).css({"border": ""}); 
    } 
}); 

$('input[type="button"]').click(function(){ 
    var length = $('input[type="text"]').val().length; 
    if(length===0){ 
     $('input[type="text"]').css({"border":"1px solid red"}); 
    } else { 
     $('input[type="text"]').css({"border":""}); 
    } 
});

}）;

來源

2013-08-05 06:48:49 4lm

如果輸入值爲空，更改邊框顏色

回答

相關問題