Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <title>WRD Only</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div style="width: 100%; height: 100%; position: absolute">
    <div id="header">
        <div id="navigationBar">
            <button type="">Registration Page</button>
            <a href="Artanis.html"><button type="">Artanis</button></a>
            <button id="dropbtn">Thrall</button>
            <button type="">About Me</button>
        </div>
    </div>
    <div class="left">aa</div>
    <div class="center">
        <form>
            First Name: <input type="text" id="FName"> <br>
            Last Name: <input type="text" id="LName"> <br>
            Email: <input type="text" id="Email"> <br>
        </form>
        <button type="submit" onclick="reset()">Reset</button>
        <button type="submit" onclick="save()">Save</button>
    </div>
    <div class="right">bb</div>
    <div id="footer">footer</div>
    </div>
    <script src="mainJS.js"></script>
</body>
</html>

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

#header, #footer {
    height: 10%;
    width: 100%;
    background-color: gray;
}
.left, .right {
    display: inline-block;
    height: 80%;
    width: 10%;
    background-color: yellow;
}
.right {
    float: right;
}
.left{
    float: left;
}
#footer {
    clear: both;
}
.center{
    background-color: beige;
    height: 80%;
    width: 80%;
    display: inline-block;
    position: absolute;
}
body{
    margin: auto;
}
#navigationBar button{
    display:inline-block;
    padding:5px;
    border: 2px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: #ffffff;
    border-radius: 5px 5px;
    background-color: #cc0323;
}
.error{
    border: 1px dashed red;
}

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

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

function check(el){
    var a = el.target;
    var b = true;
    if (a.value == null) {
        a = el;
    }
    if(a.value==""){
        a.classList.add("error");
        b = false;
    }else{
        a.classList.remove("error");
        b = true;
    }
    return b;
}

function reset(){
    for (var i = 0; i < elements.length; i++) {
       if (elements[i].type != "submit") {
           elements[i].value = "";
           elements[i].classList.remove("error");
       }
    }
}

function save(){
    var a = true;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].type != "submit") {
            if (!check(elements[i])) {
                a = false;
            }
        }
    }
    return a;
}