jQuery keyup() 메소드로 유효성 검사 하기

포트폴리오로 OP.GG 클론 사이트를 제작하면서 회원가입 폼 유효성 검사 기능을 개발하면서 작은 문제에 부딪혔다.

$('#floatingInput').on('keyup' ,function(event) {
    if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test($('#floatingInput').val())) {
        $('#invalid-email').html("<i class='bi bi-exclamation-circle'></i> 유효한 이메일 주소를 입력해 주시기 바랍니다.");
    } else {
        $('#invalid-email').empty();
    }
});

처음에 이런식으로 코드를 작성 했을 때 제대로 작동이 될 줄 알았는데...

구글 크롬 개발자 모드에서는 div태그 안에 내가 입력한 값이 잘 들어온다

하지만 정작 보여지지가 않는 문제가 있었다.

여전히 구글링으로 답을 찾을 수 있었는데 바로 show() 메소드를 사용하는 것이였다.

$('#floatingInput').on('keyup' ,function(event) {
    if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test($('#floatingInput').val())) {
        $('#invalid-email').html("<i class='bi bi-exclamation-circle'></i> 유효한 이메일 주소를 입력해 주시기 바랍니다.");
         $('#invalid-email').show(); // show() 메소드 추가
    } else {
        $('#invalid-email').empty();
    }
});