0 
<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">

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

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

I want to focus only those which are empty... How can I resolve this?

4

5 回答 5

1

Use .filter() to get all textboxes whose value is blank and than do other stuff please find snippets as below

$(".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" />

于 2017-01-24T11:58:55.167 回答
1 
 $(".searchskill").each(function() {
    if($(this).val() === "") {
        $(this).css({"border-style": "solid", "border-color": "red"});
    }
});
于 2017-01-24T12:03:08.543 回答
1

Assuming you're using 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();
       }
    }
于 2017-01-24T12:05:17.357 回答
1

In my understanding, by focus you mean highlight all elements. If that is true, you can try attribute selector.

$(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">

于 2017-01-24T12:09:32.727 回答
0

It could be simpler with selectors.

// 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">

于 2017-01-24T12:16:09.203 回答