dean

<html>
    <head>
        <title>Learn</title>
    </head>
    <body>
        <div style="margin-top:200px; margin-bottom:200px; text-align: center;">
            <form method="" action="#">
                <div>
                    <label id="nama_warning"></label>
                    <input type="text" id="name" style="width: 120px;" placeholder="namamu" >
                </div>
                <br>
                <div>
                    <label id="email_warning"></label>
                    <input type="text" id="email" style="width: 120px;" placeholder="emailmu" >
                </div>
                <br>
                <div>
                    <label id="phone_warning"></label>
                    <input type="text" id="phone" style="width: 120px;" placeholder="telponmu" >
                </div>
                <br>
                <div>
                    <label id="home_warning"></label>
                    <input type="text" id="home" style="width: 120px;" placeholder="home address" >
                </div>
                <br>
                <div>
                    <label id="gender_warning"></label>
                    <input type="radio" name="gender" value="male"> Male<br>
                    <input type="radio" name="gender" value="female"> Female<br>
                </div>
                <br>
                <div>
                    <label id="password_warning"></label>
                    <input type="text" id="password" style="width: 120px;" placeholder="namamu" >
                </div>
                <button type="button" onclick="Cek()">Submit</button>
            </form>
        </div>
        <script type="text/javascript">
            function Cek(){
                var name = document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var phone = document.getElementById("phone").value;
                var gender = document.getElementsByName("gender");
                var password = document.getElementById("password").value;
                var home = document.getElementById("home").value;
                document.getElementById("nama_warning").innerHTML = (name.length < 3) ? "Nama mu kurang dari 3 huruf ! >" : "Ok";
                document.getElementById("email_warning").innerHTML = (!email.match(/@/g) || !email.match(/.com/g) || email.match(/@/g).length > 1) ? "this is not email, type email properly." : "Ok";
                document.getElementById("phone_warning").innerHTML = (phone.match(/^\d+$/g)) ? "Ok" : "Please type number.";
                document.getElementById("password_warning").innerHTML = (password.length >= 8) ? "Ok" : "password Kurang dari 8 karakter";
                document.getElementById("home_warning").innerHTML = (home.length < 1) ? "Alamat rumah harus di isi" : "Ok";
                if(gender[0].checked == true){
                    document.getElementsById("gender_warning").innerHTML = "Ok";
                }else if(gender[1].checked == true){
                    document.getElementsById("gender_warning").innerHTML = "Ok";
                }else{
                    document.getElementsById("gender_warning").innerHTML = "Ok";
                }

            }
        </script>
    </body>
</html>