<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Hello, world!</title>
</head>
<body>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control" id="email">
</div>
<div class="my-3">
<input type="password" class="form-control" id="ps">
</div>
<button type="submit" class="btn btn-primary" id="send">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<div class="main-bg">
<h4>Shirts on Sale</h4>
<button id="login" class="btn btn-danger"> login</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
$("#login").on('click',function(){
$('.black-bg').toggleClass('show-modal');
})
$('#close').on('click',function(){
$('.black-bg').removeClass('show-modal');
})
// document.getElementById().value; -> input에 입력한 값
$('form').on('submit',function(){
if(document.getElementById('email').value =='' ){
alert('아이디를 입력하세요, 암호를 입력하세요');
}
if(document.getElementById('ps').value ==''){
alert('password ')
}
if(document.getElementById('ps').value.length < 6){
alet('6글자 이상 입력하세요.');
}
});
</script>
</body>
</html>
처음에 아이디와 패스워드 입력으로 || 연산자로 넣고 한 if문으로 작성했었거든요, 그래서 선생님과 달라서 6글자 제대로 안되나보다 싶어서 선생님이랑 코드 맞췄는데, 그래도 제대로 작동 안하고 있어서 질문드립니다.
패스워드에 6글자 이하로 입력해도 success페이지로 넘어갑니다.. 이유를 모르겠습니다.
