title: Javascript form validation username and password
body: <p>Trying to add validation to my login form.</p>
  
  <p>At the minute the validation ensures both fields have values and that they are both over 4 characters and below 13.</p>
  
  <p>But whenever they enter a username and password that should work, the alert still says they need to enter information between 5 and 12 characters.</p>
  
  <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 x = document.forms["logindetails"]["username"].value;
      var y = document.forms["logindetails"]["password"].value;
      if (x == "" || y == "") {
          alert("Username and password must be filled out");
      } else if ((x &gt; 4 &amp;&amp; x &lt; 13) &amp;&amp; (y &gt; 4 &amp;&amp; y &lt; 13)) {
        makeCookies();
      } else{
        alert("Username and password must be between 5 and 12 characters");
      }
  }
   
   
   //function within the validateform function
   function makeCookies(){
      var visitorusername = document.logindetails.username.value;
      var visitorpassword = document.logindetails.password.value;
      SetCookie("usernamecookie",visitorusername);
      SetCookie("passwordcookie",visitorpassword);
      alert("User Account Created!");
      window.location.replace('LoginRegistration.html');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class ="logincredentials"&gt;
        Account Details
        &lt;br&gt;&lt;br&gt;
        &lt;form name="logindetails"&gt;
        &lt;input type="text" name="username" placeholder="Username" pattern="[a-zA-Z]{5,12}" title="Please enter more than 5 characters and less than 12"&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;input type="password" name="password" placeholder="Password"&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;button type="button" class="loginbuttons" onclick="validateForm();" &gt;Sign up&lt;/button&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;input type="reset" class="loginbuttons" value="Reset details"&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;button type="button" class="loginbuttons" onclick="location.href='LoginRegistration.html'" &gt;Return to Log In&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Where am I going wrong?</p>