複数のテキストボックスで、上から順に入力しないとエラーが表示され、入力内容が重複してる場合もエラーが表示されるようにしたい

Question

前提・実現したいこと

＜前提＞
いわゆる「登録フォーム」をHTMLで作成しています。
form内にテキストボックスが複数あり、登録ボタンを押した際に、入力内容に応じてエラーが表示されるようにしたいです。

＜実現したいこと＞
・テキストボックスを上から順に使用しないとエラーを表示（ただし全て未入力の場合もOK（エラーを表示しない））
→1番目のテキストボックスに入力し、2番目のテキストボックスに何も入力せず、3番目のテキストボックスに入力し、登録ボタンを押すとエラーが表示
→全てのテキストボックスに何も入力されていない場合はそのまま通過
かつ
・テキストボックスの入力内容に重複があった場合エラーを表示
→1番目のテキストボックスにaaと入力、2番目のテキストボックスにbbと入力、3番目のテキストボックスにccと入力、4番目のテキストボックスにaaと入力し、登録ボタンを押すとエラーが表示

該当のソースコード

<form name="register" action="/terateil" method="post" onSubmit="return check()">
<p>
<label for="t1">テキスト入力</label><br>
<label for="t1">1.<input type="text" id="t1" name="TEXT1"></label><br>
<label for="t2">2.<input type="text" id="t2" name="TEXT2"></label><br>
<label for="t3">3.<input type="text" id="t3" name="TEXT3"></label><br>
<label for="t4">4.<input type="text" id="t4" name="TEXT4"></label>
</p>
<br>
<input type="submit" value="登録">
</form>

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[kei344]

【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips

Answer 1

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

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.tx').forEach(x=>{
    addEventListener('input',e=>{
      var txs=[...document.querySelectorAll('.tx')];
      var n=0;
      txs.forEach((x,y)=>{if(x.value!=="") n=y});
      txs.forEach((x,y)=>x.required=(n>y));
    });
  });
});
</script>
<form>
<input type="text" id="t1" name="TEXT1" class="tx"><br>
<input type="text" id="t2" name="TEXT2" class="tx"><br>
<input type="text" id="t3" name="TEXT3" class="tx"><br>
<input type="text" id="t4" name="TEXT4" class="tx"><br>
<input type="submit" value="send">
</form>