title: HTML and javascript username validation
body: <p>For my school project we have to make a sign up page and check if the input is valid.
  This is my code so far but the validity check won't work.</p>
  
  <p>I am trying to make a button that checks validity and turns another button into submit but it wont work for some reason.</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 CheckAll() {
    var flag = true;
    var length = document.getElementById('user').value.length;
    var value = document.getElementById('user').value;
    for (var i = 0; i &lt; length; i++) {
      if (!(value.charAt(i) &gt;= '0' &amp;&amp; value.charAt(i) &lt;= '9') || (value.charAt(i) &gt;= 'a' &amp;&amp; value.charAt(i) &lt;= 'z') || (value.charAt(i) &gt;= 'A' &amp;&amp; value.charAt(i) &lt;= 'Z')) {
        alert("username must be made of characters and numbers only");
        flag = false;
      }
    }
    var lengthPass = document.getElementById('password').value.length;
    var valuePass = document.getElementById('password').value;
    for (var i = 0; i &lt; lengthPass; i++) {
      if (!(valuePass.charAt(i) &gt;= '0' &amp;&amp; valuePass.charAt(i) &lt;= '9') || (valuePass.charAt(i) &gt;= 'a' &amp;&amp; valuePass.charAt(i) &lt;= 'z') || (valuePass.charAt(i) &gt;= 'A' &amp;&amp; valuePass.charAt(i) &lt;= 'Z')) {
        alert("Password must be made of characters and numbers only");
        flag = false;
      }
  
    }
    if (!(length &gt;= 6 || length &lt;= 20)) {
      alert("Username Must be 6-20 Characters long");
    }
    if (!(lengthPass &gt;= 6 || lengthPass &lt;= 20)) {
      alert("Password must be 6-20 characters long")
      flag = true;
  
    }
    var valueMail = document.getElementById("mail").value;
    var check = false;
    var shtrudel = 0;
    for (var i = 0; i &lt; valueMail.length; i++) {
      if (value.chatAt(i) == '@') {
        shtrudel++;
        for (var j = i; j &lt; valueMail.length; j++) {
          if (valueMail.charAt(j) == '.') {
            check = true;
          }
        }
      }
    }
    if (shtrudel &gt; 1) {
      alert("You're only allowed to have 1 '@' sign");
    }
    if (!check) {
      alert("Your email has to include a '@' sign and a '.' sign");
    }
    var valuePhone = document.getElementById('phone').value;
    var lengthPgone = document.getElementById('phone').value.length;
    for (var i = 0; i &lt; length; i++) {
      if (!((valuePhone.charAt(i) &gt;= '0' || valuePhone.charAt(i) &lt;= '9') &amp;&amp; (valuePhone.length != 7))) {
        flag = false;
  
  
      }
    }
  // ------ missing a } ----- //
  
  function AgreeCheck() {
    var Check = document.getElementById("agree").checked;
    var Button = document.getElementById("submit");
    if (Check &amp;&amp; (CheckAll)) {
      Button.setAttribute("type", "submit");
      Button.removeAttribute("style");
    } else {
      Button.setAttribute("type", "button");
      Button.setAttribute("style", "color:grey");
  
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    background-image: url("Images/cup630.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 150%;
  }
  
  form {
    color: red
  }
  
  input[type=text],
  input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  .cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
  }
  
  .cancelbtn,
  .signupbtn {
    float: left;
    width: 50%;
  }
  
  .container {
    padding: 16px;
  }
  
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  
  @media screen and (max-width: 300px) {
    .cancelbtn,
    .signupbtn {
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="HomePage.html" id="form"&gt;
    Name+Last Name: &lt;input type="text" name="names" /&gt;
    &lt;br /&gt;
    &lt;br /&gt; Username: &lt;input type="text" name="username" id="user" /&gt;
    &lt;br /&gt;
    &lt;p style="font-size:70%"&gt;must contain 6-20 character&lt;/p&gt;
    &lt;br /&gt; Password: &lt;input type="text" name="password" id="password" /&gt;
    &lt;br /&gt;
    &lt;p style="font-size:70%"&gt;must contain 6-20&lt;/p&gt;
    &lt;br /&gt; E-mail: &lt;input type="text" name="mail" id="mail" /&gt;
    &lt;br /&gt; Phone Number: &lt;input type="text" name="phone" id="phone" /&gt;
    &lt;br /&gt; Enter Your Birth Date:
    &lt;br /&gt;
    &lt;br /&gt; Day &lt;input type="text" name="day" /&gt; Month &lt;input type="text" name="month" /&gt; Year &lt;input type="text" name="year" /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;br /&gt; Enter Your Favourite Esports Game:
    &lt;select&gt;
                  &lt;option&gt;League Of Legends&lt;/option&gt;
                  &lt;option&gt;Dota&lt;/option&gt;
                  &lt;option&gt;StarCraft&lt;/option&gt;
                  &lt;option&gt;Street Fighter&lt;/option&gt;
                  &lt;option&gt;Smite&lt;/option&gt;
                  &lt;option&gt;Mortal Kombat&lt;/option&gt;
                  &lt;option&gt;Heroes Of The Storm&lt;/option&gt;
                  &lt;option&gt;Super Smash Bros&lt;/option&gt;
                  &lt;option&gt;Call of Duty&lt;/option&gt;
                  &lt;option&gt;Counter Strike: Global Offensive&lt;/option&gt;
                  &lt;option&gt;I Dont Watch Esports&lt;/option&gt;
              &lt;/select&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;input type="button" name="agree" id="agree" value="check validity" onclick="AgreeCheck()" /&gt;
    &lt;input type="button" name="submit" id="submit" value="submit" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>