How can I ensure that my function is being called and running

I am creating a form validation here. I want to ask how does form validation works. The script i have here does not seem to return anything as the error given on the JS console is that the ValidateForm() function is undefined.

HTML:

    <form name="myForm" action="ControllerServlet" onsubmit="return validateForm()" method="post">
  <tr>
    <td class="newusertd">Name:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="name" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Contact Number:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="phone" placeholder="98989898" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Email:<span class="price">*<br></span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="email" placeholder="[email protected]" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Address:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="address" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Password:<span class="price">*</span>
      <br>(8-16 Characters with
      <br>one UPPERCASE & numbers)</td>
    <td class="newusertd">
      <input style="color: black;" type="password" name="password" class="Btn">
  </tr>
  <tr>
    <td class="newusertd"></td>
    <td class="newusertd">
      <input style="color: black;" type="submit" value="Create Account" class="Btn" />
    </td>
  </tr>
</form>

JS:

 function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  var phone = document.forms["myForm"]["phone"].value;
  var email = document.forms["myForm"]["email"].value;
  var add = document.forms["myForm"]["address"].value;
  var passwd = document.forms["myForm"]["password"].value;
  var matchesCount = email.split("@").length - 1;
  var matchesCount2 = email.split(".").length - 1;
  var error = "";
  if (!name || !phone || !email || !add || !passwd) {
    error += "All must be filled out \n"

    if (phone.search(/^[0-9]*$/) == -1 || phone.length != 8) {
      error += "- Phone number can only contain digits \n";
    }

    if (passwd.search(/^[0-9a-zA-Z]*$/) == -1) {
      error += "- Password needs to be alphanumeric \n";
    }

    if (passwd.length < 8 || passwd.length > 16) {
      error += "- Password contain only 8-16 digits \n";
    }

    if (matchesCount > 1 || matchesCount2 < 1) {
      error += "- Please enter a valid email \n";
    }
    alert(error);
    return false;
  }
}

https://jsfiddle.net/KodeError404/wpwv614c/

Please inform me if you cannot see the JSFiddle.

In the script I am checking if all fields are filled and if its not filled, it should return false. I would appreciate if this is kept strictly to JS and not JQuery.

EDIT: This issue is that the password does not seem to check if i key in anything or if its alphanumeric with Uppercase. I want to know why does all fields get checked but not my password field