値が空のすべてのクラスフィールドにどのようにフォーカスすることができますか？

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