ボタンをクリックすると未入力項目へカーソルが当たるjQueryについて

Question

前提・実現したいこと

jQuery初心者です。
アンケートで未入力項目がある場合、送信ボタンを押したときに未入力になっている項目にカーソルが当たるjQueryを教えていただきたいです。

該当のソースコード

【イメージはこんな感じです。】
inputやselectはblockクラスで、くくられています。
送信ボタンをクリックすると、一番最初の未入力のinput項目へカーソルが入った状態にしたいです。

<div id="step">

	<div class="block">
		<div class ="radio">
			<input type="radio" name="card">
			<input type="radio" name="card">
			<input type="radio" name="card">
		</div>
		
	<div class="block">
		<div class ="text">
			<input type="test" name="familyName">
		</div>
		<div class ="text">
			<input type="test" name="firstName">
		</div>
	</div>

	<div class="block">
		<div>
			<select name="form1:birthMonth">
			<option value="01">1月</option>
			<option value="02">2月</option>
			<option value="03">3月</option>
			<option value="04">4月</option>
			<option value="05">5月</option>
			<option value="06">6月</option>
			<option value="07">7月</option>
			<option value="08">8月</option>
			<option value="09">9月</option>
			<option value="10">10月</option>
			<option value="11">11月</option>
			<option value="12">12月</option>
			</select>
		</div>
	</div>

	<div class="block">
		<div class ="text">
			<input type="test" name="kanafamilyName">
		</div>
		<div class ="text">
			<input type="test" name="kanafirstName">
		</div>
	</div>

	<div class="block">
		<div class ="text">
			<input type="password" name="kaiin">
		</div>
	</div>

	<div id="Btn1">
		<a href="">送信</a>
	</div>
</div>

試したこと

調べながら書いてみましたがうまく動きませんでした。

$('Btn1').click(function(){
$('.block').find('input[type="text"],input[type="password"]').each(function() {
if(this.value ==""){
$(this).focus();
}
});
});

補足情報（FW/ツールのバージョンなど）

windows

Comments

[kei344]

（質問文は編集できます）質問文のHTML/JavaScriptはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[k-teratail]

ご指摘ありがとうございます！codeで囲ってみました。見やすくなりました！

Answer 1

普通にrequiredをつけるだけでカーソルあたりませんか？

<form>
<input type="text" name="a" value="123" required><br>
<input type="text" name="b" value="456" required><br>
<input type="text" name="c" value="" required><br>
<input type="text" name="d" value="789" required><br>
<input type="text" name="e" value="0ab" required><br>
<input type="submit" value="send">
</form>

追記

<script>
$(function(){
  $('form').on('submit',function(e){
    var item=$(this).find('input').filter(function(){return $(this).val()=="";});
    if(item.length>0){
      e.preventDefault();
      item.eq(0).trigger('focus');
    }
  });
});
</script>
<form>
<input type="text" name="a" value="123"><br>
<input type="text" name="b" value="456"><br>
<input type="text" name="c" value=""><br>
<input type="text" name="d" value="789"><br>
<input type="text" name="e" value="0ab"><br>
<input type="submit" value="send">
</form>

Comments

[k-teratail]

回答ありがとうございます！jQueryだけで実装したいのですが、requiredをつける方法もあるんですね！参考にさせていただきます。

[yambejp]

jQueryの処理も追記しておきました

[k-teratail]

早急なご回答ありがとうございます！一つ一つ解読しながら読んでみます！

Answer 2

とりあえず動くようにはしましたが、根本的にフォームで値を送るには、全体をform要素で囲んだ上でinput type="submit"などを置く必要があります。a要素では単純にページ移動するだけです。

//$('Btn1').click(function(){
// ↓ IDセレクタ
$('#Btn1').click(function(){
$('.block').find('input[type="text"],input[type="password"]').each(function() {
if(this.value ==""){
$(this).focus();
}
});
return false; // これが無いとページ移動する
});
```**動くサンプル：**[https://jsfiddle.net/cfaLzhb5/](https://jsfiddle.net/cfaLzhb5/)

Comments

[k-teratail]

動くサンプルまで丁寧にありがとうございます！こちらのカーソルですが、ボタンを押したときに意味回答項目の一番上にフォーカスさせるにはどうしたらよいでしょうか？

[kei344]

yambejpさんの例示されているような方法（先に「value ==""」の要素を特定しておいてその0番目にフォーカス）を採ればできますよ。

[k-teratail]

ありがとうございます！やってみます！！