Zenn
🎃

【チームプロジェクトRefactor①】バリデーションチェック、defer(addEventListenerのType Error解決）

2024/02/19に公開
JavaScript
tech

はじめに

今回は以前、チームプロジェクトを解決しているうちに解決したトラブルを解決し、
refactoringしたコードについてお話したいと思います。

addEventListerのNullエラー（TypeError）

設定したいイベントがありましたが、Eventが反応しない問題があり、ネットが検索した結果、
「headにJavaScriptのコードを埋め込む場合、htmlよりさきにローディングされ、適用されない場合がある！」　というケースを読みました。

add.member
 <script src="/js/validation.js" defer></script>

そのため、deferを追加した結果、無事に解決できました！

JSにはビジネスロジックを！

UIなどを変更する際には、直接styleを操作するのではなく、cssのクラスで操作することで、JS内には.hideを条件文の分岐によって動作するようにコントロールしました。
また、イベント移譲　を通し、SpringBootのサーバーバリデーション後のerror messageを
各inputではなく、一つのform　にかけ、event.targetを活用しました。

'use strict'

const member = document.querySelector('#member');
const memberPw = document.querySelector('#memberPw');
const memberPw2 = document.querySelector('#memberPw2');
const password2Error = document.querySelector('#memberPw2Error')

/*サーバー 下にあるメッセージを除去*/
member.addEventListener('click',event =>{
    let target = event.target;
    
    if(target.tagName !== 'INPUT') return;

    const serverErrorMessage = target.nextElementSibling.querySelector('.label__error');
    console.log('3')
    serverErrorMessage.classList.add('hide');
})


/*フロントエンドからPWとPW確認の一致をリアタイムで確認*/
memberPw2.addEventListener('keyup',()=>{
    const password = memberPw.value;
    const password2 = memberPw2.value;

    if(password2.length >= 8 && password !== password2){
        password2Error.classList.remove('hide') ;
    }
    else{
        password2Error.classList.add('hide');
    }

})

Discussion