Untitled

<!DOCTYPE html>
<head>
    <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>Registrasi 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="8"></td>
                        <td>Konfirmasi Password</td>
                        <td><input type="password" placeholder="Konfirmasi Password" id="konpassword" minlength="8"></td>
                    </tr>
                </table>
        </fieldset>
        <fieldset>
            <legend>Registrasi 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="" placeholder="Alamat" id="alamat" cols="50" rows="5" minlength="20"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="">Kode Pos</td>
                        <td colspan="">No Handphone</td>
                    </tr>
                    <tr>
                        <td colspan=""><input type="text" placeholder="Kode Pos" id="pos" minlength="5" maxlength="5"></td>
                        <td colspan=""><input type="text" placeholder="No Handphone" 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">

    //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 konpassword = document.getElementById("konpassword").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 == "" || konpassword == ""||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 != konpassword) {
            alert("Konfirmasi Password Berbeda");
            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 Nomor Handphone 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>