Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
    <link rel="stylesheet" href="regpage.css"/>
    <script>


        ///Check For User Length
        function user_name()

        {
            var value = document.getElementById("username").value;
            if (value != "")
            {
                if(value.length < 8 || value.length > 12)
                {
                    document.getElementById("demo_user").innerHTML = "Username Must be Between 8 to 12 letters!";
                    return false;
                }
                else {
                    document.getElementById("demo_user").innerHTML = "Valid Username!";
                    return true;
                }
            }
            else {
                document.getElementById("demo_user").innerHTML = "Empty Field.";

                return false;
            }
        }


        ///Check For Password Length & Complextiy
        function pass_word() {
            var pass = document.getElementById("password").value;
            if (pass != "") {
                if (pass.length < 8 || pass.length > 12) {
                    document.getElementById("demo_pass").innerHTML = "password Must be Between 8 to 12 letters!";
                    return false;
                }
                else {
                    if (!/[!@#$%^&*]/.test(pass) || !/[A-Z]/.test(pass)) {
                        document.getElementById("demo_pass").innerHTML = "Password Must Contain uppercase & Special characters.";
                        return false;
                    }

                    else {
                        document.getElementById("demo_pass").innerHTML = "Valid Password!";
                        return true;
                    }
                }

                }
                else {
                    document.getElementById("demo_pass").innerHTML = "Empty Field.";
                    return false;
                }
        }

        function ver_pass_word() {
            var pass = document.getElementById("password").value;
            var pass2 = document.getElementById("ver_password").value;

            if (pass != pass2)
            {
                document.getElementById("demo_ver_pass").innerHTML = "Password Dont Match!";
                return false;
            }
            else {
                document.getElementById("demo_ver_pass").innerHTML = "Valid & Match password.";
                return true;
            }
        }


        ///Check For id Length
        function I_D() {
            var identify = document.getElementById("id").value;
            if (identify != "") {
                if (identify.length != 8) {
                    document.getElementById("demo_id").innerHTML = "ID Must Conatin 8 Numbers ONLY";
                    return false;
                }
                else {
                    if (isNaN(identify)) {
                        document.getElementById("demo_id").innerHTML = "ID Must Conatin 8 Numbers ONLY!";
                        return false;
                    }
                    else {
                        document.getElementById("demo_id").innerHTML = "Valid Identify.";
                        return true;
                    }
                }
            }
            else {
                document.getElementById("demo_id").innerHTML = "Empty Field!";
                return false;
            }
        }


        ///Check If gender checked
        function chkGender()
        {
            var gender = document.getElementsByName('gender');
            var isFound = false;
            for (var i = 0; i < gender.length; i++)
            {
                if (gender[i].checked == true)
                {
                    isFound = true;
                    break;
                } // if
            } // for
            if (isFound == true)
                return true;
            else
                alert("You didn't choose gender");
            return false;
        }


        function chkAge() {
            var ageRange = document.getElementById("age").value;

            if (ageRange != "empty")
                if (ageRange != "12-18")
                    return true;
                else {
                    alert("You must be older than 18");
                    return false;
                }
            else // ageRange == "empty"
            {
                alert("Please choose your age range!");
                return false;
            }

        }

        function cell()
        {
            var cellp = document.getElementById("cellphone").value;
            if (cellp != "") {
                if (isNaN(cellp) || cellp.length > 10 || cellp.length < 10) {
                    document.getElementById("demo_cellphone").innerHTML = "Invalid Cellphone number.";
                    return false;
                }
                else {
                    document.getElementById("demo_cellphone").innerHTML = "Valid Cellphone !";
                    return true;
                }
            }
            else {
                document.getElementById("demo_cellphone").innerHTML = "Empty Field.";
                return false;
            }
        }

            function valid() {
                if (user_name() && pass_word() && I_D && chkGender() && chkAge() && cell()) {
                    confirm("האם תרצה לשמור את פרטי ההתחברות?")
                    return true;
                }
                else {
                    return false;
                }
            }

    </script>

</head>
<body>

    <form onsubmit="return valid()" action="home.html">
        <table >
            <tr>
                <td>
                    Username:
                </td>
                <td>
                    <input type="text" id="username" onblur="user_name()" />
                </td>
                <td>
                    <p id="demo_user"></p>
                </td>
            </tr>

            <tr>
                <td>
                    Password:
                </td>
                <td>
                    <input type="password" id="password" onblur="pass_word()" />
                </td>

                <td colspan="2">
                    <button type="button" onclick="if(password.type=='text')password.type='password'; else password.type='text';">
                        show/hide password
                    </button>

                </td>


                    <td colspan="2">
                        <p id="demo_pass"></p>
                    </td>


            </tr>


            <tr>
                <td>
                    Verifaction Password:
                </td>
                <td>
                    <input type="password" id="ver_password" onblur="ver_pass_word()" />
                </td>

                <td>
                    <p id="demo_ver_pass"></p>
                </td>
            </tr>

            <tr>
                <td>
                    ID:
                </td>
                <td>
                    <input type="text" id="id" onblur="I_D()" />
                </td>
                <td>
                    <p id="demo_id"></p>
                </td>
            </tr>

            <tr>
                <td>
                    Cellphone:
                </td>
                <td>
                    <input type="text" id="cellphone" onblur="cell()" />
                </td>

                <td>
                    <p id="demo_cellphone"></p>
                </td>
            </tr>

            <tr>
                <td>
                    Email:
                </td>
                <td>
                    <input type="email" required/>
                </td>
            </tr>


            <tr>
                <td>
                    <input type="radio" name="gender" value="male" onblur="chkGender()"> Male <br />
                    <input type="radio" name="gender" value="female" onblur="chkGender()"> Female <br />
                    <input type="radio" name="gender" value="other" onblur="chkGender()"> Other <br />
                </td>
            </tr>

            <tr>
                <td>Age:</td>
                <td>
                    <select id="age" name="age" onblur="chkAge()">
                        <option value="empty" selected="selected">בחר</option>
                        <option value="12-18">12-18</option>
                        <option value="19-25">19-25</option>
                        <option value="26-39">26-39</option>
                        <option value="40-49">40-49</option>
                        <option value="50+">50+</option>
                    </select>
                </td>
                <td id="demo_age"></td>
            </tr>


            <tr>
                <td>
                    <input type="submit" value="Submit!" />
                    <input type="reset" value="Reset!" />
                </td>
            </tr>


        </table>
    </form>
</body>
</html>