JSでのフォームバリデーションの作成方法

フォームバリデーションとは

フォームに入力されている内容が妥当かどうかをチェックする機能のことです。
年齢のボックスには年齢が、名前のボックスには名前が入力されているのか、入力されていない場合はエラーを表示させる、といったものです。

やったこと

・htmlにエラーメッセージを書く
・エラーメッセージにクラスをつける（err-txtとした）
・cssにてerr-txtをdisplay:none;で消す
・JSにて条件分岐を作成...

JSでやったこと

・フォームタグの情報を取得する変数formを定義
・addEventListenerでsubmitイベントを作成、関数定義
・それぞれのインプットタグに対応する正規表現を初期化した変数（定数）を定義

const katakanaRegex = new RegExp(/^([ァ-ン]|ー)+$/);

・それぞれのインプットタグの要素をform.name.valueなどで取得（ややこしいが、ここのnameはそれぞれのインプットタグに書いてあるname属性である。）

・取得したインプットタグの要素（文字列）を正規表現に照合した結果を受け取るmatch()メソッドを使って、それぞれのインプットタグの照合結果を代入した変数を定義する
引数（パラメータ）の部分にはさっき定義した正規表現の変数を入れる

let reultkana = kana.match(katakanaRegex);

・match()メソッドの、一致しているものがあればarray、なければnullを返す特性を活かして条件分岐を作成
→nullであればpreventDefaultでイベントを中止する
→クラスの追加や削除ができるclassListプロパティのremove()メソッドを使い、err-txtクラスを消す（つまり、エラーメッセージを消しているクラスを消すことで、元々ついているエラーメッセージを表示させる）

・else文でclassLIst.add()を使い、err-txtを追加させるコードを記述
（この際、私はif文、else文でもエラーメッセージのIDで（クラスでもいけると思うが）要素をいちいち取得して変数定義し、それに紐付けてclassListプロパティを記述していた..）

・（名前の入力欄のみ、ひらがな正規表現に照合させて、空欄の場合のelse if文を記述した

else if(resulttext == ""){
  e.preventDefault();
  let errname = document.getElementById('err-name');

なぜひらがなだけこれを書かないと動かなかったのかが、微妙に理解できていない）

まとめ

ちょっとややこしく書きすぎた
エラーメッセージはJS側で用意できるし、フラグという概念を使えばもっとスマートに条件分岐を記述できた

参考

matchメソッドの理解

引数の理解