[JavaScript / jQuery] if 문을 활용하여 모달창 내 아이디, 비밀번호 공백검사 기능 만들기

💡 실습 포인트!

• 위 입력칸(아이디 입력칸)이 공백이면 "아이디를 입력하세요." 라는 내용이 뜨고, 다음 화면으로 넘어가지 못하게 했다.
• 아래 입력칸(비밀번호 입력칸)이 공백이면 "비밀번호를 입력하세요." 라는 내용이 뜨고 다음 화면으로 넘어가지 못하고, 비밀번호를 입력했을지라도 8자리 미만이면 "8자리 이상의 비밀번호를 입력하세요."라는 내용이 뜨고 다음 화면으로 넘어가지 못하게 했다.
• 만약 모든 아이디, 비밀번호 조건을 만족했다면 전송 버튼을 눌렀을 때, 전송 완료 페이지로 넘어갈 수 있게 했다.

---

💜 JavaScript

$('#submit').eq(0).on('click', function(e){
    if($('#email').val() == '') {
        e.preventDefault();
        alert('아이디를 입력하세요.');
    } 
    if ($('#password').val() == '') {
        e.preventDefault();
        alert('비밀번호를 입력하세요.');
    } else if ($('#password').val().length < 8) {
        e.preventDefault();
        alert('8자리 이상의 비밀번호를 입력하세요.');
    }
})

• 아이디(위)나 비밀번호(아래)를 입력하는 창이 공백이라면 "아이디를 입력하세요.", "비밀번호를 입력하세요." 라는 문구가 뜨게 했다.
• 그리고 비밀번호를 입력했더라도, length 를 활용하여 비밀번호의 길이가 8자리 미만인 경우 "8자리 이상의 비밀번호를 입력하세요." 라는 문구가 뜨도록 했다.
• 참고로 input 의 내용을 받아오는 jQuery 문법은 .val() 이고 JavaScript 문법은 .value() 이다.
• 그리고 별도의 설정이 없으면 제대로 입력이 되지 않았는데도 전송 완료 페이지로 넘어가버리는데 이를 방지하려면 e.preventDefault() 를 사용하면 된다.
• 전송 완료 페이지는 success.html 페이지인데 form 태그에 action 속성을 활용하였다.