如果输入值为null，请更改边框颜色

Change the border color if input value is null

本文关键字：边框 颜色 输入 null 如果      更新时间：2023-09-26

我想做的是同时更改所有输入文本边框的颜色，如果它/它们在单击按钮时为null或没有值，我有一个函数可以做到这一点。首先，我将要检查值的输入文本放入一个数组中，然后调用函数，在其中循环遍历数组并检查空值。单击按钮时，如果我的所有输入文本都为null，它将只更改数组中第一个索引的颜色。

这是我的功能：

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

如何更改数组中所有具有null值的输入的边框颜色？谢谢

这是我的两分钱，可能需要调整：

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

使用它：

isValid("#txtLastName, #txtFirstName");

我在caller中构建CSS选择器并将其传递给isValid()，您本可以传递数组["txtFirstName", "txtFirstName"]并在isValid()中构建选择器。

有很多方法可以做到这一点，一种更模块化的方法是使用nullValidate类作为选择器，这样您就可以拥有任意多的已验证字段。

EDIT:如果发现无效元素，则返回

为什么混合了jQuery和vanillaJS。。只需使用filter方法即可。

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

此外，您编写代码的方式没有任何问题

你很可能没有使用正确的id。

您的代码

JQuery代码

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

})；

相关文章：