如果输入值为空，则更改边框颜色答案

【问题标题】：Change the border color if input value is null如果输入值为空，则更改边框颜色
【发布时间】：2013-08-05 04:57:28
【问题描述】：

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

这是我的功能：

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

如何用空值改变数组中所有输入的边框颜色？谢谢！

【问题讨论】：

你的问题是......？
如何用空值改变数组中所有输入的边框颜色
在循环中更改 for(var x=0;x
当数组中只有 2 个元素时，您永远不会想要访问数组 [2]。如果将循环更改为 x
$(array[x]).css("border-color","#FF0000"); - 既然您使用的是 jquery，为什么不使用 $('input').each( ...？

标签： javascript jquery

【解决方案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 类作为选择器，这样您就可以拥有任意数量的验证字段。

编辑：如果发现无效元素则返回

【讨论】：

我忘了说如果有空值我需要返回false。我可以在哪里添加？
空值是什么意思？ <input> 值的默认值为 ""（或在 value 属性中指定的值）并且不会是 null。
或者您希望该函数帮助跟踪是否有任何空值？我已经修改了，你可以检查isValid()返回的真实性。

【解决方案2】：

为什么要混合使用 jQuery 和 vanilla JS .. 可以只使用 filter 方法。

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

您编写代码的方式也没有问题。

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

Your Code

JQuery Code

【讨论】：

【解决方案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":""});
    }
});

});

【讨论】：