Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Registration Page</title>
- </head>
- <body>
- <div style="width:50%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto">
- <h2>Registrasion Page</h2>
- <hr>
- <form method="POST" action="https://www.google.com" onsubmit="return validate()">
- <fieldset>
- <legend>Akun</legend>
- <table>
- <tr>
- <td>Email</td>
- <td><input type="email" name="email" placeholder="Email" id="email"></td>
- <td>Username</td>
- <td><input type="text" name="username" placeholder="Username" id="username" minlength="5" maxlength="10"></td>
- </tr>
- <tr>
- <td>Password</td>
- <td><input type="password" placeholder="password" id="password" minlength="6"></td>
- <td>Konfirmasi Password</td>
- <td><input type="password" placeholder="password" id="kpassword" minlength="6"></td>
- </tr>
- </table>
- </fieldset>
- <fieldset>
- <legend>Data Pribadi</legend>
- <table cellspacing="7" border="0" >
- <tr>
- <td>Jenis Kelamin</td>
- <td>Tanggal Lahir</td>
- </tr>
- <tr>
- <td><select name="jenkel" id="jenkel" required>
- <option value="">--Jenis Kelamin--</option>
- <option value="Wanita" value="wanita">Wanita</option>
- <option value="Pria" value="pria">Pria</option>
- </select></td>
- <td><input type="date" name="" id="date"></td>
- </tr>
- <tr>
- <td>Agama</td>
- </tr>
- <tr>
- <td colspan="3">
- <input type="radio" name="agama" value="Islam" id="agama">Islam
- <input type="radio" name="agama" value="Kristen Protestan" id="agama">Kristen Protestan
- <input type="radio" name="agama" value="Katolik" id="agama">Katolik
- </td>
- </tr>
- <tr>
- <td colspan="3">
- <input type="radio" name="agama" value="Hindu" id="agama">Hindu
- <input type="radio" name="agama" value="Budha" id="agama">Budha
- <input type="radio" name="agama" value="Kong Hu Chu" id="agama">Kong Hu Chu
- </td>
- </tr>
- <tr>
- <td>Alamat</td>
- </tr>
- <tr>
- <td colspan="3">
- <textarea name="" id="alamat" cols="50" rows="5" minlength="20"></textarea>
- </td>
- </tr>
- <tr>
- <td colspan="">Kode Pos</td>
- <td colspan="">No HP</td>
- </tr>
- <tr>
- <td colspan=""><input type="text" id="pos" minlength="5" maxlength="5"></td>
- <td colspan=""><input type="text" id="nohp" minlength="12" maxlength="14"></td>
- </tr>
- </table>
- </fieldset>
- <fieldset>
- <legend>Olahraga Favorit</legend>
- <table>
- <tr>
- <td colspan="4">
- <input type="checkbox" name="olahraga[]" id="olahraga">Lari
- <input type="checkbox" name="olahraga[]" id="olahraga" value="renang">Renang
- <input type="checkbox" name="olahraga[]" id="olahraga" value="badminton">Badminton
- <input type="checkbox" name="olahraga[]" id="olahraga" value="tenis meja">Tenis Meja
- </td>
- </tr>
- <tr>
- <td colspan="4">
- <input type="checkbox" name="olahraga[]" id="olahraga">Tenis Lapangan
- <input type="checkbox" name="olahraga[]" id="olahraga" value="sepak bola">Sepak Bola
- <input type="checkbox" name="olahraga[]" id="olahraga" value="basket">Basket
- <input type="checkbox" name="olahraga[]" id="olahraga" value="voli">Voli
- </td>
- </tr>
- </table>
- </fieldset> <br>
- <button type="submit" id="register">Register</button>
- <button type="reset">Reset</button>
- </form>
- </div>
- </body>
- <script type="text/javascript">
- function validate() {
- var email = document.getElementById("email").value;
- var username = document.getElementById("username").value;
- var password = document.getElementById("password").value;
- var kpassword = document.getElementById("kpassword").value;
- var birth = new Date(document.getElementById("date").value);
- var pos = document.getElementById("pos").value;
- var nohp = document.getElementById("nohp").value;
- var today = new Date;
- var nowYear = today.getFullYear();
- var nowMonth = today.getMonth();
- var nowDate = today.getDate();
- var birthYear = birth.getFullYear();
- var birthMonth = birth.getMonth();
- var birthDate = birth.getDate();
- var age = nowYear - birthYear;
- var ageMonth = nowMonth - birthMonth;
- var ageDate = nowDate - birthDate;
- if(email == "" || username == "" || password == "" || kpassword == ""|| jenkel == "" ||date == "" || alamat == "" || pos == "" || nohp == "" || olahraga == "")
- {
- alert('lengkapi form yang ada!')
- return false;
- }
- // email
- var emailregex = /\S+@\S+\.\S+/;
- if(!email.match(emailregex)) {
- alert("email tidak sesuai format");
- return false;
- }
- // username
- var usernameregex = /^[@a-z]{1}[a-z0-9_.-]{4,9}$/i
- if(!username.match(usernameregex)) {
- alert("username harus diawali dengan huruf atau '@'");
- return false;
- }
- // password
- if(password != kpassword) {
- alert("password dan konfirmasi password tidak cocok!");
- return false;
- }
- // tgl lahir
- if ((age == 17 && ageMonth <= 0 && ageDate <=0) || age < 17) {
- alert("minimal usia 17thn!");
- return false;
- }
- // no hp
- var noregex = /^[+0-9]{1}[0-9]{11,13}$/
- if(!nohp.match(noregex)) {
- alert("format no hp tidak sesuai!!")
- return false;
- }
- // kode pos
- var posregex = /^[0-9]{5}$/
- if(!pos.match(posregex)) {
- alert('kode pos harus angka');
- return false;
- }
- // olahraga
- var olahraga = document.getElementsByName("olahraga[]");
- var check = 0;
- for(var i = 0; i < olahraga.length; i++)
- {
- if(olahraga[i].checked)
- {
- check += 1;
- }
- }
- if(check < 2)
- {
- alert("paling sedikit checklist 2 olahraga!");
- return false;
- }
- // agama
- var a = document.getElementsByName("agama");
- var checked = "";
- for(var i = 0; i < a.length; i++)
- {
- if(a[i].checked)
- {
- checked = a[i].value;
- }
- }
- if(checked == "")
- {
- alert("pilih kolom agama!");
- return false;
- }
- alert("sukses registrasi");
- return true;
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement