JavaScriptでテキストボックスの値を判定

Question

前提

PHPで入力フォームを作成しております。
テキストボックスで入力した値をJavaScriptで入力判定をし、入力されていたら確認フォームでテキストの値を取得するように作成しております。
入力判定後に未入力であれば、取得する画面に行かないようプログラムを作成しました。追加でテキストボックスの下に「未入力」と表示させたいのですが、JavaScriptで実現する事は可能でしょうか？

実現したいこと

テキストボックス内の値を判定し、入力されていなかったらテキストボックスの下に「未入力」と表示

  <!-- form作成 -->
    <form action="conf.php" method="post" name = 'form1'>

        <!-- ID -->
        <div class='id'>
            <label>ID:</label>
            <input type="text" name="id">
        </div>

        <!-- 名前 -->
        <div class='name'>
            <label>名前：</label>
            <input type="text" name='name'>
        </div>

        <!-- 性別 -->
        <div>
            <label>性別:</label>
            <label>男</label><input type="radio" name='sex' value='男'>
            <label>女</label><input type="radio" name='sex' value='女'>
        </div>

        <!-- 送信ボタン作成 -->
        <button onclick="return check();">送信</button>
    </form>

function check(){
    alert("送信しますか？")

    if(document.form1.id.value == ""){
        return false;
    }

    if(document.form1.name.value == ""){
        return false;
    }
}

試したこと

取得する側でheader関数を利用し、セッションを用いてエラー表示をする事はできたのですが、JavaScriptを用いて実行できる方法が思いつきません。

if(count($err) > 0){
    $_SESSION = $err;
    header('Location:Registr.php');
    return;

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

セッション、cookieは使わないようにと指示がありました。
php 8.1.6

Answer 1

こんな感じでどうでしょうか？

https://codepen.io/riafeed/pen/abYRrro

Comments

[Fuyu]

解答していただきありがとうございます。

Answer 2

<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('[type=submit]')){
    document.querySelectorAll('[required] ~ .invalid').forEach(x=>x.remove());
  }
});
document.addEventListener('invalid',e=>{
  const t=e.target;
  if(t.matches('.check')){
    t.insertAdjacentHTML('afterend','<span class="invalid">未入力</span>');
  }
},true);

</script>
<form method="post">
<div class='id'>
<label>ID:</label>
<input type="text" name="id" required class="check">
</div>
<div class='name'>
<label>名前：</label>
<input type="text" name='name' required class="check">
</div>
<div>
<label>性別:</label>
<label>男</label><input type="radio" name='sex' value='男'>
<label>女</label><input type="radio" name='sex' value='女'>
</div>
<button type="submit">送信</button>
</form>

Comments

[Fuyu]

解答していただきありがとうございます。

Answer 3

JavaScriptを用いて実行できる方法が思いつきません。

値があるかの判定はすでに行っているわけですから、あとはその結果を表示させるだけです。