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

Question

我想做的是同時更改所有輸入文本邊框的顏色（如果單擊按鈕時它們具有空值或無值），我有一個功能可以做到這一點。 首先，我將要檢查值的輸入文本放入數組，然后在該函數在數組中循環並檢查空值的地方調用該函數。 單擊按鈕時，如果我所有的輸入文本均為空，則只會更改數組中第一個索引的顏色。

這是我的功能：

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;
    }

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

Answer 1

這是我的兩分錢，可能需要調整：

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類作為選擇器，因此您可以根據需要擁有任意數量的經過驗證的字段。

編輯：如果找到無效的元素，則返回

Answer 2

為什么混合使用jQuery和香草JS ..可以只使用filter方法。

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

同樣，編寫代碼的方式也沒有錯。

您很可能沒有使用正確的ID。

您的密碼

jQuery代碼

Answer 3

只值我的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":""});
    }
});

}）;