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>Document</title>
    <link rel="stylesheet" type="text/css" href="newPagesCSS.css">
</head>
<body>
    <div id="page">
        <div id="Header">
                <ul>
                    <a href=""><li>Main Page</li></a>
                    <div id="dropdown">
                        <a href=""><li> Forums</li></a>
                        <div id="hidden">
                            <ul>
                                <a href=""><li>Chess</li> <br></a>
                                <a href=""><li>Networking</li></a>
                            </ul>
                        </div>
                    </div>
                    <a href=""><li>Sign Up</li></a>
                    <a href=""><li>About Us</li></a>
                </ul>
        </div>
        <div id="menu">
                <form id="form">
                    Username: <br>
                    <input type="text" name="Username" value="" placeholder="Username" id="Username"> <br>
                    Password: <br>
                    <input type="text" name="Password" value="" placeholder="Password" id="Password"> <br>
                    Email: <br>
                    <input type="text" name="Email" value="" placeholder="Email" id="Email"> <br>
                    <br>
                    <div id="block1">
                        Predmet: <br>
                        <input type="radio" name="Predmet" value=""> PR3 <br>
                        <input type="radio" name="Predmet" value=""> BP2 <br>
                        <input type="radio" name="Predmet" value=""> KT  <br>
                    </div>
                    <div id="block2">
                        Certifikati: <br>
                        <input type="checkbox" name="check" value=""> CCNA <br>
                        <input type="checkbox" name="check" value=""> MCSA <br>
                        <input type="checkbox" name="check" value=""> JNCA <br>
                    </div>
                    <br>
                </form>
            <button type="submit" id="button" onclick="final()">Submit</button>
            <button type="submit" id="button" onclick="autoMail()">Make Mail</button>
        </div>
    </div>
    <script src="newPagesJS.js"></script>
    <script src="jquery-validation-1.16.0\lib\jquery.js"></script>
    <script src="jquery-validation-1.16.0\dist\jquery.validate.js"></script>
    <script src="newPageJQ.js"></script>
</body>
</html>

---------------------------------------------------------

body{
    background-color: blue
}
#page{
    width: 100%;
    height: 100%;
}
#menu{
    background-color: lightblue;
    border: 1 solid red;
    border-radius: 5%;
    margin: auto;
    display: inline-block;
    width: 20%;
    height: 30%;
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: 2px 2px 2px red;
}
#form{
    margin-top: 10px;
    margin-left: 10px;
}
input{
    margin-left: 10px;
}
#block1{
    display: inline-block;
    width: 50%;

}
#block2{
    display: inline-block;
}
#button{
    margin-top: 20px;
}
#hidden{
    display: none;
    position: absolute;
    z-index: 1000;
}
#hidden ul{
    background-color: white;
    display: inline-block;
}

#hidden li:hover{
    background-color: grey;
    color: red;
}
#hidden a{
    text-decoration: none;
}
li{
    text-decoration: none;
    list-style: none;
    display: inline-block;
    margin-right: 30px;
}
#Header ul{
    text-align: center;
}
#Header{
    background-color: lightblue;
}
#dropdown{
    display: inline-block;
}
#dropdown:hover #hidden{
    display: block;
}
.error{
    border: 1px solid red;
}
button{
    margin-left: 10px;
    margin-right: 10px;
}

------------------------------------------------------------

var elementi = document.getElementsByTagName("input");
for (var i = 0; i < elementi.length; i++) {
    if (elementi[i].type != 'submit') {
        elementi[i].onblur = check;
    }
}

function check (e){
    var a = e.target;
    if (a == null) {
        a = e
    }
    if (a.value == "") {
        a.classList.add("error");
    }else{
        a.classList.remove("error");
    }
}

function final(){
    for (var i = 0; i < elementi.length; i++) {
        if (elementi[i].type != 'submit') {
            check(elementi[i]);
        }
    }
}

function autoMail(){
    var User = document.getElementById("Username").value;
    var array = User.split(" ");
    var Fname = array[0];
    var Lname = array[1];
    var pass = document.getElementById("Password").value;
    var final = Fname + "." + Lname +"."+ pass +"@edu.fit.ba";
    document.getElementById("Email").value = final;
}

-----------------------------------------------------------------------

$(document).ready(function(){
    $("#form").validate({
        rules: {
            Username: {required: true, minlength: 4},
            Password: "required",
            Email: "required"
        },
        messages:{
            Username: "Please insert a username",
            Password: "Please insert a password",
            Email: "Email will be generated correctly if you insert a Username and Password"
        }
    })
});