Form and input validation

Hello I am trying to get two inputs inside of a form tag to bring up a error message if you leave either of them blank.

I went to w3schools and tried their code but it does not work. (see below)

HTML validateForm()" method="post"> Name:

Js function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; } }

I removed the action="demo_form.asp" from the code because my teacher told me to

Here is my code HTML

<div class="loginShite">
<form name="username" onsubmit="return validateForm()" method="post">
<input type="text" name="username" placeholder="@Username" /> 
<input type="password" name="password" placeholder="Password" /> <br   
/>
</form>
<div class="loginButton"><a href="#homePage"><input type ="button"   
value="login" /></a></div>
</div>

Js

function validateForm() {
var x = document.forms["username"]["password"].value;
if (x == null || x == "") {
    alert("Name must be filled out");
    return false;
}
}

I would be greatly appreciative is somebody could either tell me what I'm doing wrong OR point me in the right direction to solve the problem.

Thank you in advance.