如何聚焦所有 class 值为空的字段？

Question

<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="3"> 
<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="4">

var skillname =$(".searchskill").map(function() {
  if($(this).val()==''){
      return false;
   }
}).get();

if(jQuery.isEmptyObject(skillname)){
} else {
    alert("You Can Not Keep Skill Name As Blank"); 
    $(".searchskill").css({"border-style": "solid", "border-color": "red"});
    $(".searchskill").focus();
    return false;
}

我只想关注那些空的...我该如何解决这个问题？

Answer 1

使用 .filter() 获取所有值为空的文本框，与其他内容相比，请查找如下片段

$(".clssubmit").on("click", function() {
  var filteredList = $('.searchskill').filter(function() {
    return $(this).val() == "";
  });
  if (filteredList.length > 0) {
    filteredList.css("border", "1px solid red");
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="searchskill" value="">
<input type="text" class="searchskill" value="3">
<input type="text" class="searchskill" value="">
<input type="text" class="searchskill" value="4">

<input type="button" value="submit" class="clssubmit" />

Answer 2

 $(".searchskill").each(function() {
    if($(this).val() === "") {
        $(this).css({"border-style": "solid", "border-color": "red"});
    }
});

Answer 3

假设您正在使用 jQuery;

var $inputs = $(".searchskill");
 for (let i = 0, iLen = $inputs.length; i < iLen; i++) {
       var $elem = $($inputs[i]);
       if($elem.val()===""){
       $elem.parent("div").addClass("border-red alert-danger");
       $elem.focus();
       }
    }

Answer 4

在我看来，focus 是指 highlight 所有元素。如果是这样，您可以尝试 attribute 选择器。

$(function(){
  $('.searchskill[value=""]').addClass('error')
})

.error{
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type ="text" class="searchskill" value=" "> 
<input type ="text" class="searchskill" value="3"> 
<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="4"> 
<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="4"> 
<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="4">
<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="4"> 
<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="4">

Answer 5

使用选择器可能会更简单。

// highlight all empty fields and focus on the first one
$('.searchskill[value=""]').css({"border-style": "solid", "border-color": "red"})[0].focus();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="3"> 
<input type ="text" class="searchskill" value=""> 
<input type ="text" class="searchskill" value="4">

如何聚焦所有 class 值为空的字段？

How can i focus all class fields whose value is empty?

javascript

jquery

validation

array.prototype.map