zuzitsu / UR_Village

Go to a project
Toggle navigation Toggle navigation pinning
Suyeon Jung
cb1aae1f 1 parent 4a3ffc02

Add validate function to index

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