javascript - 尝试更改表单中未选择对象的边框颜色

Question

我是 jquery 新手。现在我尝试将那些未选中的对象更改为红色边框，以警告用户填写一些值。

if($("select:visible").val()==undefined ){

            $(this).css({"border-color":"red"});
  }

但这似乎并没有改变任何事情。如果语句为真，我想更改“那些”。我该如何实现它？

另外，我正在尝试将边框设为红色。但我不想只是让它变红。相反，我想要的效果就像“onfocus”时带有蓝色边框的引导“输入”一样。可以这样做吗？

$('#broadcast_next').click(function(){
        var mySelect = $("select:visible");
        if($("select:visible").val()=="" || $("input:visible").val()=="" ){

                $("select:visible").filter(function() { return this.value === "" }).addClass("invalid");

                $("input:visible").filter(function() { return this.value === "" }).addClass("invalid");


            alert('Please fill in the Blank');
        }

        else if(formpage_broadcast == 0){
            $('.page_basic').hide();
            if(eth_input==true){
                $('.page_ip').show();
                $('#broadcast_title').text('IP Configuration')
                formpage_broadcast++;
            }
            else{
                $('.page_rf').show();
                $('#broadcast_title').text('RF Configuration')
                formpage_broadcast++;
            }
        }

Answer 1

this 不是按 block 设置的，而是按函数设置的，因此 $(this) 不会选择 if< 中刚刚引用的元素 条件。相反，保留对元素的引用:

var mySelect = $("select:visible");
if (mySelect.val() == undefined) {
  mySelect.css({"border-color":"red"});
}

除了上面假设只有一个元素之外。以下技术将处理任意数量的元素:

$("select:visible")
  .css({"border-color":""})                         // remove border from all
  .filter(function() { return this.value === "" })  // select empty ones
  .css({"border-color":"red"});                     // add border

请注意，它使用 this，但在函数内部传递给 .filter()。所以它的作用是首先抓取所有可见的选择元素，然后将该集合减少到没有值的元素，然后将这些元素设置为具有红色边框。

不过，您最好添加和删除一个类，这样您就可以应用您喜欢的任何附加格式，而无需将其全部硬编码到 JS 中。:

$("select:visible")
  .removeClass("invalid")
  .filter(function() { return this.value === "" })
  .addClass("invalid");

这是一个小演示:

$("button").click(function() {
  $("select:visible")
    .removeClass("invalid")
    .filter(function() { return this.value === "" })
    .addClass("invalid");
});

select {
  border-color: blue;
}
.invalid {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="">Please select a value</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select>
<option value="">Please select a value</option>
<option value="1">Whatever</option>
<option value="2">Blah</option>
</select>
<br><br>
<button>Test Validation</button>