Suyeon Jung

Add validate function to index

1 -<head> 1 +<meta charset="UTF-8" />
2 - <meta charset="UTF-8" /> 2 +<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3 - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 3 +<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
4 - <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' /> 4 +<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-grid.min.css' />
5 - <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-grid.min.css' /> 5 +<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-reboot.min.css' />
6 - <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-reboot.min.css' /> 6 +<link rel="preconnect" href="https://fonts.gstatic.com">
7 - <link rel="preconnect" href="https://fonts.gstatic.com"> 7 +<link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300&display=swap" rel="stylesheet">
8 - <link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300&display=swap" rel="stylesheet"> 8 +<link rel="stylesheet" href="/css/style.css">
9 - <link rel="stylesheet" href="/css/style.css"> 9 +<title>🏡 어떤 동네가 좋은 동네일까?</title>
10 - <title>🏡 어떤 동네가 좋은 동네일까?</title> 10 +<style>
11 - <style>
12 img { 11 img {
13 display: block; 12 display: block;
14 margin: 0px auto; 13 margin: 0px auto;
15 } 14 }
16 - </style>
17 -
18 -</head>
...\ No newline at end of file ...\ No newline at end of file
15 +</style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 - 4 +<head>
5 -<%- include('components/header') -%> 5 +
6 - 6 + <%- include('components/header') -%>
7 - <body> 7 + <script>
8 + function validate() {
9 + // 필수 입력자 확인
10 + let sigun = document.getElementById("sigun").value;
11 + let dong = document.getElementById("dong").value;
12 + if (!sigun || !dong) {
13 + alert("주소를 입력해주세요(시/군, 동 필수)");
14 + document.getElementById("sigun").focus();
15 + } else {
16 + document.getElementById("location").submit();
17 + }
18 +
19 + }
20 + </script>
21 +</head>
22 +
23 +
24 +<body>
8 <div class="indexpage"> 25 <div class="indexpage">
9 26
10 27
11 - <form action="/category" method="post" name="location"> 28 + <form action="/category" method="post" name="location" id="location">
12 <div class="card mx-auto mb-2" style="width : 100%;"> 29 <div class="card mx-auto mb-2" style="width : 100%;">
13 30
14 <img class="gyeonggi" src="/img/logo.png" style="margin :30px"> 31 <img class="gyeonggi" src="/img/logo.png" style="margin :30px">
...@@ -18,16 +35,16 @@ ...@@ -18,16 +35,16 @@
18 35
19 <h5 class="card-title">당신이 조사하고 싶은 동네의 주소를 입력하세요!</h5><br> 36 <h5 class="card-title">당신이 조사하고 싶은 동네의 주소를 입력하세요!</h5><br>
20 <p>* 경기도 내 동네만을 입력해주세요</p><br> 37 <p>* 경기도 내 동네만을 입력해주세요</p><br>
21 - <input type="text" class="form-control" id="exampleFormControlInput1" name="sigun" placeholder="시/군을 입력하세요"><br> 38 + <input type="text" class="form-control" id="sigun" name="sigun" placeholder="시/군을 입력하세요"><br>
22 - <input type="text" class="form-control" id="exampleFormControlInput1" name="gu" placeholder="구를 입력하세요"><br> 39 + <input type="text" class="form-control" id="gu" name="gu" placeholder="구를 입력하세요"><br>
23 - <input type="text" class="form-control" id="exampleFormControlInput1" name="dong" placeholder="읍/면/동을 입력하세요"><br> 40 + <input type="text" class="form-control" id="dong" name="dong" placeholder="읍/면/동을 입력하세요"><br>
24 - <button type="submit" class="btn btn-warning">검색</button><br> 41 + <button type="button" onclick="validate()" class="btn btn-warning">검색</button><br>
25 </div> 42 </div>
26 </div> 43 </div>
27 </div> 44 </div>
28 </form> 45 </form>
29 </div> 46 </div>
30 - </body> 47 +</body>
31 48
32 49
33 50
......