jQuery boş olan ilk ögeye odaklayamıyorum

Merhaba arkadaşlar. Sırf size gösterebilmek için bir deneme belgesi hazırladım.

Yapmak istediğim şey:

Yapmak istediğim şey, gönder düğmesine basıldığında boş olan tüm metin alanlarına (textBox'lara) "bu alan boş bırakılamaz" yazılması ve boş olan ilk ögeye klavye odağının focus() javaScript fonksiyonuyla getirilmesi. Fakat bunu aşağıda verecek olduğum kodla yapamıyorum.

Kod

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İletişim</title>
    <script src="/jquery.js"></script>
</head>
<body>
    <h1>İletişim kur</h1>
<form id="iletisimFormu">
<label for="ad">Adınız: <input id="ad"></label><br>
<label for="soyad">Soyadınız: <input id="soyad"></label><br>
<label for="mesaj">Mesaj: <textarea name="mesaj" id="mesaj" cols="60" rows="20"></textarea></label><br>
<button type="button" id="gonder">Gönder</button>
</form>
<script>
$("#gonder").on("click",function(){
ad=$("#ad").val();
soyad=$("#soyad").val();
mesaj=$("#mesaj").val();
if(ad==""||soyad==""||mesaj==""){
    $("input[value='']").val("Lütfen bu alanı doldurun");
    document.querySelector("input[value='']").focus();
}
});
</script>
</body>
</html>

Sevgiler