Untitled

<!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>Form Registrasi</title>
</head>
<body>
    <div style="width:50%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto">
    <h2>Form Registrasi</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 Diri</legend>
                <table cellspacing="7" border="0" >
                    <tr>
                        <td>Jenis Kelamin</td>
                        <td>Tanggal Lahir</td>
                    </tr>
                    <tr>
                        <td><select name="gender" id="gender">
                            <option value="">--Jenis Kelamin--</option>
                            <option value="Pria" value="pria">Pria</option>
                            <option value="Wanita" value="wanita">Wanita</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</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">

    //Javascript
    function validate() {
        //Variabel Form
        var email = document.getElementById("email").value;
        var gender = document.getElementById("gender").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;

        //Variabel Perhitungan Tanggal
        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 == ""||date == ""||gender == "" || alamat == "" || pos == "" || nohp == ""
            || olahraga == "")
        {
            alert("Form Belum Lengkap")
            return false;
        }

        var emailregex = /\S+@\S+\.\S+/;
        if(!email.match(emailregex)) {
            alert("Format Email Salah");
            return false;
        }

        var usernameregex = /^[@a-z]{1}[a-z0-9_.-]{4,9}$/i
        if(!username.match(usernameregex)) {
            alert("Format Username Salah ( Gunakan Huruf / simbol @ )");
            return false;
        }

        if(password != kpassword) {
            alert("Konfirmasi Password Berbeda");
            return false;
        }

        if(gender == "") {
            alert("Jenis Kelamin Belum Dipilih")
            return false;
        }

        if ((age == 17 && ageMonth <= 0 && ageDate <=0) || age < 17) {
                alert("Minimal Usia 17 Tahun");
                return false;
        }

        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("Pilihan Agama Kosong");
            return false;
        }

         var posregex = /^[0-9]{5}$/
        if(!pos.match(posregex)) {
            alert("Format Kode Pos Salah");
            return false;
        }

        var noregex = /^[+0-9]{1}[0-9]{11,13}$/
        if(!nohp.match(noregex)) {
            alert("Format NO HP Salah")
            return false;
        }

        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("Minimal Pilih 2 Olahraga");
            return false;
        }


        alert("Registrasi Sukses");
        return true;

        }

        </script>
    </html>