javascriptでチェックプログラムを作りたい

Question

HTMLで項目を複数用意し、各項目に必須チェックを設けたいと考えています。
アラート文はプロパティファイルから取り、かつ、項目名をアラート文に渡したいと考えています。
この場合、javascriptで空白等のチェックだけ行い、HTML側でアラートを出した方がいいのでしょうか。
すっきりとした実装方法が浮かびません。
おすすめのサイトや、サンプルコードございましたら、教えていただきたいです。

Answer 1

requiredだけで十分だと思いますが、任意のエラー文書を表示したいなら適当なライブラリに頼るかinvalidで処理するかがベターで、alertはエラーが出ていることだけユーザーに返すほうがくどくなくてよいでしょう

参考

<style>
.err{
color:red;
}
</style>
<script>
document.addEventListener('click',e=>{
  if(e.target.matches('[type=submit]')){
    document.querySelectorAll('.err').forEach(x=>x.remove());
  }
});
document.addEventListener('invalid',e=>{
  const t=e.target;
  const err=Object.assign(document.createElement('span'),{'className':'err','textContent':t.dataset.err??'エラー'});
  t.parentNode.insertBefore(err,t.nextSibling);
  e.preventDefault();
},true);
</script>
<form>
<input required data-err="必須項目"><br>
<input pattern="\d" data-err="数値のみ"><br>
<input required><br>
<input type="submit" value="send">
</form>