Advertisement
Guest User

Untitled

a guest
Apr 23rd, 2019
121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.13 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Registration Page</title>
  8. </head>
  9. <body>
  10. <div style="width:50%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto">
  11. <h2>Registrasion Page</h2>
  12. <hr>
  13. <form method="POST" action="https://www.google.com" onsubmit="return validate()">
  14. <fieldset>
  15. <legend>Akun</legend>
  16. <table>
  17. <tr>
  18. <td>Email</td>
  19. <td><input type="email" name="email" placeholder="Email" id="email"></td>
  20. <td>Username</td>
  21. <td><input type="text" name="username" placeholder="Username" id="username" minlength="5" maxlength="10"></td>
  22. </tr>
  23. <tr>
  24. <td>Password</td>
  25. <td><input type="password" placeholder="password" id="password" minlength="6"></td>
  26. <td>Konfirmasi Password</td>
  27. <td><input type="password" placeholder="password" id="kpassword" minlength="6"></td>
  28. </tr>
  29. </table>
  30. </fieldset>
  31. <fieldset>
  32. <legend>Data Pribadi</legend>
  33. <table cellspacing="7" border="0" >
  34. <tr>
  35. <td>Jenis Kelamin</td>
  36. <td>Tanggal Lahir</td>
  37. </tr>
  38. <tr>
  39. <td><select name="jenkel" id="jenkel" required>
  40. <option value="">--Jenis Kelamin--</option>
  41. <option value="Wanita" value="wanita">Wanita</option>
  42. <option value="Pria" value="pria">Pria</option>
  43. </select></td>
  44. <td><input type="date" name="" id="date"></td>
  45. </tr>
  46. <tr>
  47. <td>Agama</td>
  48. </tr>
  49. <tr>
  50. <td colspan="3">
  51. <input type="radio" name="agama" value="Islam" id="agama">Islam
  52. <input type="radio" name="agama" value="Kristen Protestan" id="agama">Kristen Protestan
  53. <input type="radio" name="agama" value="Katolik" id="agama">Katolik
  54. </td>
  55. </tr>
  56. <tr>
  57. <td colspan="3">
  58. <input type="radio" name="agama" value="Hindu" id="agama">Hindu
  59. <input type="radio" name="agama" value="Budha" id="agama">Budha
  60. <input type="radio" name="agama" value="Kong Hu Chu" id="agama">Kong Hu Chu
  61. </td>
  62. </tr>
  63. <tr>
  64. <td>Alamat</td>
  65. </tr>
  66. <tr>
  67. <td colspan="3">
  68. <textarea name="" id="alamat" cols="50" rows="5" minlength="20"></textarea>
  69. </td>
  70. </tr>
  71. <tr>
  72. <td colspan="">Kode Pos</td>
  73. <td colspan="">No HP</td>
  74. </tr>
  75. <tr>
  76. <td colspan=""><input type="text" id="pos" minlength="5" maxlength="5"></td>
  77. <td colspan=""><input type="text" id="nohp" minlength="12" maxlength="14"></td>
  78. </tr>
  79. </table>
  80. </fieldset>
  81. <fieldset>
  82. <legend>Olahraga Favorit</legend>
  83. <table>
  84. <tr>
  85. <td colspan="4">
  86. <input type="checkbox" name="olahraga[]" id="olahraga">Lari
  87. <input type="checkbox" name="olahraga[]" id="olahraga" value="renang">Renang
  88. <input type="checkbox" name="olahraga[]" id="olahraga" value="badminton">Badminton
  89. <input type="checkbox" name="olahraga[]" id="olahraga" value="tenis meja">Tenis Meja
  90. </td>
  91. </tr>
  92. <tr>
  93. <td colspan="4">
  94. <input type="checkbox" name="olahraga[]" id="olahraga">Tenis Lapangan
  95. <input type="checkbox" name="olahraga[]" id="olahraga" value="sepak bola">Sepak Bola
  96. <input type="checkbox" name="olahraga[]" id="olahraga" value="basket">Basket
  97. <input type="checkbox" name="olahraga[]" id="olahraga" value="voli">Voli
  98. </td>
  99. </tr>
  100. </table>
  101. </fieldset> <br>
  102. <button type="submit" id="register">Register</button>
  103. <button type="reset">Reset</button>
  104. </form>
  105. </div>
  106. </body>
  107. <script type="text/javascript">
  108. function validate() {
  109. var email = document.getElementById("email").value;
  110. var username = document.getElementById("username").value;
  111. var password = document.getElementById("password").value;
  112. var kpassword = document.getElementById("kpassword").value;
  113. var birth = new Date(document.getElementById("date").value);
  114. var pos = document.getElementById("pos").value;
  115. var nohp = document.getElementById("nohp").value;
  116.  
  117. var today = new Date;
  118. var nowYear = today.getFullYear();
  119. var nowMonth = today.getMonth();
  120. var nowDate = today.getDate();
  121.  
  122. var birthYear = birth.getFullYear();
  123. var birthMonth = birth.getMonth();
  124. var birthDate = birth.getDate();
  125.  
  126. var age = nowYear - birthYear;
  127. var ageMonth = nowMonth - birthMonth;
  128. var ageDate = nowDate - birthDate;
  129.  
  130.  
  131. if(email == "" || username == "" || password == "" || kpassword == ""|| jenkel == "" ||date == "" || alamat == "" || pos == "" || nohp == "" || olahraga == "")
  132. {
  133. alert('lengkapi form yang ada!')
  134. return false;
  135. }
  136.  
  137. // email
  138. var emailregex = /\S+@\S+\.\S+/;
  139. if(!email.match(emailregex)) {
  140. alert("email tidak sesuai format");
  141. return false;
  142. }
  143.  
  144. // username
  145. var usernameregex = /^[@a-z]{1}[a-z0-9_.-]{4,9}$/i
  146. if(!username.match(usernameregex)) {
  147. alert("username harus diawali dengan huruf atau '@'");
  148. return false;
  149. }
  150.  
  151. // password
  152. if(password != kpassword) {
  153. alert("password dan konfirmasi password tidak cocok!");
  154. return false;
  155. }
  156.  
  157. // tgl lahir
  158. if ((age == 17 && ageMonth <= 0 && ageDate <=0) || age < 17) {
  159. alert("minimal usia 17thn!");
  160. return false;
  161. }
  162.  
  163. // no hp
  164. var noregex = /^[+0-9]{1}[0-9]{11,13}$/
  165. if(!nohp.match(noregex)) {
  166. alert("format no hp tidak sesuai!!")
  167. return false;
  168. }
  169.  
  170. // kode pos
  171. var posregex = /^[0-9]{5}$/
  172. if(!pos.match(posregex)) {
  173. alert('kode pos harus angka');
  174. return false;
  175. }
  176.  
  177. // olahraga
  178. var olahraga = document.getElementsByName("olahraga[]");
  179. var check = 0;
  180.  
  181. for(var i = 0; i < olahraga.length; i++)
  182. {
  183. if(olahraga[i].checked)
  184. {
  185. check += 1;
  186. }
  187. }
  188.  
  189. if(check < 2)
  190. {
  191. alert("paling sedikit checklist 2 olahraga!");
  192. return false;
  193. }
  194.  
  195. // agama
  196. var a = document.getElementsByName("agama");
  197. var checked = "";
  198. for(var i = 0; i < a.length; i++)
  199. {
  200. if(a[i].checked)
  201. {
  202. checked = a[i].value;
  203. }
  204. }
  205. if(checked == "")
  206. {
  207. alert("pilih kolom agama!");
  208. return false;
  209. }
  210.  
  211. alert("sukses registrasi");
  212. return true;
  213.  
  214. }
  215. </script>
  216. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement