11강 - 이메일 입력상자의 상태별 메세지

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="form-1" sytle="display: flex;">
    <span>이메일</span>
    <div>
        <input type="email" placeholder="이메일을 입력해주세요.">
        <div class="need_input">이메일을 입력해주세요.</div>
        <div class="invalid">형식이 올바르지 않습니다.</div>
    </div>
</div>

<!-- 이메일 입력창, 전체 체크 박스 form 많이씀 -->

.form-1 input[type="email"]~ div {
    display: none;
}
.form-1 input[type="email"].focused:placeholder-shown ~ .need_input {
    display: block;
}
.form-1 input[type="email"].focused:invalid ~ .invalid {
    display: block;
}

.need_input, .invalid {
    color : red;
}

console.clear();

function Form1__init(){
    $('.form-1 input[type="email"]').focus(function(){
    $(this).addClass("focused");
});
}

Form1__init ();

• 코드펜으로 완성된 코드 보러가기