title: Javascript: Focus is not a function
body: <p>I'm writing a registration form and am trying to sort out some validation. I got this same problem when my validate button was inside the <code>&lt;form&gt;</code> however to fix this I just moved it out as I guessed the button was causing the form to refresh.
  However now after inserting multiple if statement into the "ValidateForm()" function this error message has seemed to come back.</p>
  
  <blockquote>
    <p>Error: Uncaught TypeError: Forename.focus is not a function<br>
        at ValidateForm (Login Form Complex.html?Forename=&amp;Surname=&amp;Username=&amp;Password=&amp;Email=:79)<br>
        at HTMLButtonElement.onclick (Login Form Complex.html?Forename=&amp;Surname=&amp;Username=&amp;Password=&amp;Email=:63)**</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ValidateForm() {
    var Forename = document.getElementById("Forename").value;
    var Surname = document.getElementById("Surname").value;
    var Username = document.getElementById("Username").value;
    var Password = document.getElementById("Password").value;
    var Email = document.getElementById("Email").value;
    var Errors = 0
  
    if (Forename == "") {
      document.LoginForm.Forename.focus();
      Forename.focus();
      Errors = Errors + 1
    }
  
    if (Surname == "") {
      document.LoginForm.Forename.focus();
      Surname.focus();
      Errors = Errors + 1
  
    }
  
    if (Username == "") {
      document.LoginForm.Forename.focus();
      Username.focus();
      Errors = Errors + 1
  
    }
  
    if (Password == "") {
      document.LoginForm.Forename.focus();
      Password.focus();
      Errors = Errors + 1
  
    }
    if (Errors != 0) {
      alert("Please fill in the highlighted boxes")
      return false;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    background: url(LoginBack.jpg);
    background-size: cover;
    background-position: center;
    font-family: century gothic;
  }
  
  .loginbox {
    width: 420px;
    height: 680px;
    background: #5CDB95;
    color: #05386B;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 70px 30px;
    border-radius: 30px;
  }
  
  .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    top: -75px;
    left: calc(50% - 75px);
  }
  
  h1 {
    margin: 0px;
    padding: 0 0 20px;
    text-align: center;
    font-size: 40px;
  }
  
  .loginbox p {
    margin: 0;
    padding: 0;
    font-weight: bold;
  }
  
  .loginbox input {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .loginbox input[type="text"],
  input[type="password"],
  input[type="email"] {
    border: none;
    border-bottom: 1px solid #05386B;
    background: transparent;
    outline: none;
    height: 40px;
    font-size: 20px;
    color: #379683;
  }
  
  .loginbox button[type="Submit"] {
    border: 2px solid #05386B;
    background: #379683;
    height: 40px;
    width: 362px;
    font-size: 20px;
    color: ;
    border-radius: 20px;
  }
  
  .loginbox button[type="submit"]:hover {
    cursor: pointer;
    background: #8EE4AF;
  }
  
  .loginbox a {
    text-decoration: none;
    font-size: 15px;
    line-height: 20px;
    color: #379683;
  }
  
  .loginbox a:hover {
    cursor: pointer;
    color: #8EE4AF;
  }
  
  .loginbox input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus {
    border: none;
    border-bottom: 1px solid #8B0000;
    background: transparent;
    outline: none;
    height: 40px;
    font-size: 20px;
    color: #8B0000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="loginbox"&gt;
    &lt;img src="Logo.jpg" class="avatar"&gt;
    &lt;h1&gt; Create Account &lt;/h1&gt;
    &lt;form name="LoginForm"&gt;
      &lt;p&gt;Forename&lt;p&gt;&lt;input type="text" name="Forename" id="Forename" placeholder="Enter Forename here"&gt;
      &lt;p&gt;Surname&lt;p&gt;&lt;input type="text" name="Surname" id="Surname" placeholder="Enter Surname here"&gt;
      &lt;p&gt;Username&lt;p&gt;&lt;input type="text" name="Username" id="Username" placeholder="Enter Username here"&gt;
      &lt;p&gt;Password&lt;p&gt;&lt;input type="password" name="Password" id="Password" placeholder="Enter Password here"&gt;
      &lt;p&gt;Email&lt;p&gt;&lt;input type="email" name="Email" id="Email" placeholder="Enter Email here"&gt;
      &lt;!-- 
      &lt;p&gt;Gender&lt;p&gt;&lt;input type="radio" id="Male" name="Gender" value="Male"&gt;Male&lt;/input&gt;
                  &lt;input type="radio" id="Female" name="Gender" value="Female"&gt;Female&lt;/input&gt;
      --&gt;
      &lt;button onclick="ButtonSubmit()" type="Submit" value="True" name="ButtonSubmit"&gt; Submit &lt;/button&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;a href="#"&gt; Forgot your password? &lt;/a&gt;&lt;br /&gt;
      &lt;a href="#"&gt; Already got an account? &lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
    &lt;/form&gt;
    &lt;button onclick="ValidateForm()"&gt; Validate &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>