JavaScript でフォームのバリデーションを実装する方法

<form action="" method="POST">
    <table>
        <tbody>
            <!-- お名前 -->
            <tr>
                <th></th>
                <td><div class="err-msg-name"></div></td>
            </tr>
            <tr>
                <th><label for="name">お名前</label></th>
                <td><input type="text" name="name" id="name" placeholder="ジャバ　スクリプ子"></td>
            </tr>
            <!-- パスワード -->
            <tr>
                <th></th>
                <td class="err-msg-pass"></td>
            </tr>
            <tr>
                <th><label for="password">パスワード</label></th>
                <td><input type="password" name="password" id="password" placeholder="5文字以上の英数字"></td>
            </tr>
            <!-- パスワード再入力 -->
            <tr>
                <th></th>
                <td class="err-msg-passre"></td>
            </tr>
            <tr>
                <th><label for="pass-re">パスワード(再入力)</label></th>
                <td><input type="password" name="pass-re" id="pass-re" placeholder="5文字以上の英数字"></td>
            </tr>
            <!-- 送信ボタン -->
            <tr>
                <th></th>
                <td><input type="submit" class="submit"></td>
            </tr>
        </tbody>
    </table>
</form>

window.addEventListener('DOMContentLoaded', () => {

    // 「送信」ボタンの要素を取得
    const submit = document.querySelector('.submit');
    
    // 「送信」ボタンの要素にクリックイベントを設定する
    submit.addEventListener('click', (e) => {
        // デフォルトアクションをキャンセル
        e.preventDefault();

        // 「お名前」入力欄の空欄チェック
        // フォームの要素を取得
        const name = document.querySelector('#name');
        // エラーメッセージを表示させる要素を取得
        const errMsgName = document.querySelector('.err-msg-name');
        if(!name.value){
            // クラスを追加(エラーメッセージを表示する)
            errMsgName.classList.add('form-invalid');
            // エラーメッセージのテキスト
            errMsgName.textContent = 'お名前が入力されていません';
            // クラスを追加(フォームの枠線を赤くする)
            name.classList.add('input-invalid');
            // 後続の処理を止める
            return;
        }else{
            // エラーメッセージのテキストに空文字を代入
            errMsgName.textContent ='';
            // クラスを削除
            name.classList.remove('input-invalid');
        }

        // 「パスワード」入力欄の形式チェック
        const pass = document.querySelector('#password');
        const errMsgPass = document.querySelector('.err-msg-pass');
        // パスワードが5文字以上の半角英数字であるかどうかのチェック
        if(!pass.value.match(/^([a-zA-Z0-9]{5,})$/)){
            errMsgPass.classList.add('form-invalid');
            errMsgPass.textContent = '半角英数字5文字以上で入力してください';
            pass.classList.add('input-invalid');
            return;
        }else{
            errMsgPass.textContent ='';
            pass.classList.remove('input-invalid');
        }

        // 「パスワード」と「パスワード再入力」が一致しているかどうかのチェック
        const passRe = document.querySelector('#pass-re');
        const errMsgPassRe = document.querySelector('.err-msg-passre');
        if(pass.value !== passRe.value){
            errMsgPassRe.classList.add('form-invalid');
            errMsgPassRe.textContent = 'パスワードとパスワード再入力が一致していません';
            passRe.classList.add('input-invalid');
            return;
        }else{
            errMsgPassRe.textContent ='';
            passRe.classList.remove('input-invalid');
        }
    }, false);
}, false);

body {
    color: #111111;
}

.title {
    width: 500px;
    font-weight: bold;
    margin-top: 40px;
    text-align: center;
}

table {
    margin-top: 20px;
    width: 500px;
}

table td input {
    width: 300px;
    height: 30px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    outline: none;
    margin: 4px 0 4px 8px;
    text-indent: 4px;
}

table th {
    text-align: right;
    font-size: 14px;
    font-weight: normal;
}

table td input:focus {
    border: 1px solid #1982C4;
}

.form-invalid {
    color: #f50000;
    font-size: 12px;
    padding-left: 12px;
}

.input-invalid {
    border: 1px solid #f50000;
}

.submit {
    width: 305px;
    height: 30px;
    color: white;
    background-color: #696969;
    border: 1px solid #696969;
    cursor: pointer;
}

// 「送信」ボタンの要素を取得
const submit = document.querySelector('.submit');

// 「送信」ボタンの要素にクリックイベントを設定する
submit.addEventListener('click', (e) => { }, false);

// デフォルトアクションをキャンセル
e.preventDefault();

// フォームの要素を取得
const name = document.querySelector('#name');
// エラーメッセージを表示させる要素を取得
const errMsgName = document.querySelector('.err-msg-name');

// クラスを追加(エラーメッセージを表示する)
errMsgName.classList.add('form-invalid');
// エラーメッセージのテキスト
errMsgName.textContent = 'お名前が入力されていません';
// クラスを追加(フォームの枠線を赤くする)
name.classList.add('input-invalid');

// 後続の処理を止める
return;

// エラーメッセージのテキストに空文字を代入
errMsgName.textContent ='';

// クラスを削除
name.classList.remove('input-invalid');