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

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

这里是我的功能：

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

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

回答

相关问题