JS アラート処理とフォーカスアウト処理が同時実行されるバグ

Question

HTMLでテキストボックスを用意し、フォーカスアウト時に入力チェックを行います。
もし入力チェックで問題があれば、フォーカスをテキストに戻します。

<input type="text" id="a" name="a" onblur="test('a')">
<input type="text" id="b" name="b" onblur="test('b')">

function test(id) {
  var str = document.getElementById(id);
  if (str.value == '') {
    alert("値を入力してください");
    str.focus();
  }

上記のようにして、id=a, id=bともにテキスト未入力でaのテキストからbのテキストにフォーカスが移動した際にアラートの無限ループが始まります。
http://doshirouto.wp.xdomain.jp/web/javascript-web/2644の記事を調べたところ、
★alert()を閉じる際のフォーカスをアラートのウィンドウから外す
★テキストボックスにフォーカスをつける
が、同時に実行される。
結果、テキストボックスにフォーカス⇒フォーカスを外される⇒onblur()が着火。無限ループ。
という結果が出たので、setTimeoutを実装しました。

function test(id) {
  var str = document.getElementById(id);
  if (str.value == '') {
    alert("値を入力してください");
    setTimeout(function() {
      str.focus();
    }, 1}
  }

テキストが１つであればこちらの対処法で解決するのですが、今回は複数存在するため解決には至りませんでした。
解決策を教えていただけると幸いです。
よろしくお願いいたします。

Answer 1

alertをやめて入力欄の横にエラーメッセージを表示してください
未入力のチェックだけならrequiredも効果はあるでしょう