Wie kann ich alle Klassenfelder fokussieren, deren Wert leer ist?

Question

Wie kann ich alle Klassenfelder fokussieren, deren Wert leer ist?

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

Ich möchte nur diejenigen konzentrieren, die leer sind ... Wie kann ich das beheben?

Answer 1

Verwenden .filter() bekommt alle Textfelder, dessen Wert ist leer, und als andere Dinge zu tun bitten Sie mit jQuery finden Schnipsel wie unten

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

Unter der Annahme;

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

In meinem Verständnis von focus meinen Sie highlight alle Elemente. Wenn das stimmt, können Sie attribute selector versuchen.

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

Es könnte mit Selektoren einfacher sein.

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