title: How can I set rule on Form as first char should not be number?
body: <p>I'm stuck in Form elements. 
  The rule is ; first char of your password should not be number. It should start with any of letter. </p>
  
  <p>Basicially here is my code ; </p>
  
  <p>I defined all CLASSES ( password[0] element should not be number ) : </p>
  
  <pre><code>const form = document.getElementById('form');
  const username = document.getElementById('username');
  const password = document.getElementById('password');
  const password2 = document.getElementById('password2');
  const name = document.getElementById('name');
  const surname = document.getElementById('surname');
  const adres = document.getElementById('adres');
  </code></pre>
  
  <p>Than I get their values.</p>
  
  <pre><code>form.addEventListener('submit', e =&gt; {
      e.preventDefault();
  
      checkInputs();
  });
  
  function checkInputs() {
      // trim to remove the whitespaces
      const usernameValue = username.value.trim();
      const passwordValue = password.value.trim();
      const password2Value = password2.value.trim();
      const nameValue = name.value.trim();
      const surnameValue = surname.value.trim();
      const adresValue = adres.value.trim();
  </code></pre>
  
  <p>Than when you get success / error final screen </p>
  
  <pre><code> if(usernameValue === '') {
          setErrorFor(username, 'Username cannot be blank');
      } else {
          setSuccessFor(username);
      }
  
      if(passwordValue === '') {
          setErrorFor(password, 'Password cannot be blank');
      } else {
          setSuccessFor(password);
      }
      if(password2Value === '') {
          setErrorFor(password2, 'Password2 cannot be blank');
      } else if(passwordValue !== password2Value) {
          setErrorFor(password2, 'Passwords does not match');
      } else{
          setSuccessFor(password2);
      }
      if(nameValue === ''){
          setErrorFor(name, 'Name cannot be blank');
      }else{
          setSuccessFor(name)
      }
      if(surnameValue === ''){
          setErrorFor(surname, 'Surname cannot be blank');
      }else{
          setSuccessFor(surname)
      }
      if(adresValue === ''){
          setErrorFor(adres, 'Address cannot be blank')
      }else{
          setSuccessFor(adres)
      };
  }
  
  function setErrorFor(input, message) {
      const formControl = input.parentElement;
      const small = formControl.querySelector('small');
      formControl.className = 'form-control error';
      small.innerText = message;
  }
  
  function setSuccessFor(input) {
      const formControl = input.parentElement;
      formControl.className = 'form-control success';
  }
  </code></pre>
  
  <p>Final Part here is my form code : </p>
  
  <pre><code>&lt;form id="form" class="form"&gt;
      &lt;div class="form-control"&gt;
          &lt;label for="username"&gt;Username&lt;/label&gt;
          &lt;input type="text" placeholder="UserID" id="username" /&gt;
          &lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;
          &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt;
          &lt;small&gt;Error message&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-control"&gt;
          &lt;label for="username"&gt;Vorname&lt;/label&gt;
          &lt;input type="text" placeholder="Vorname" id="name" /&gt;
          &lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;
          &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt;
          &lt;small&gt;Error message&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-control"&gt;
          &lt;label for="username"&gt;Nachname&lt;/label&gt;
          &lt;input type="text" placeholder="Nachname" id="surname" /&gt;
          &lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;
          &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt;
          &lt;small&gt;Error message&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-control"&gt;
          &lt;label for="username"&gt;Password&lt;/label&gt;
          &lt;input type="password" placeholder="Password" id="password"/&gt;
          &lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;
          &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt;
          &lt;small&gt;Error message&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-control"&gt;
          &lt;label for="username"&gt;Password check&lt;/label&gt;
          &lt;input type="password" placeholder="Password two" id="password2"/&gt;
          &lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;
          &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt;
          &lt;small&gt;Error message&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-control"&gt;
          &lt;label for="username"&gt;Adress&lt;/label&gt;
          &lt;input type="text" placeholder="Type Your Address" id="adres" /&gt;
          &lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;
          &lt;i class="fas fa-exclamation-circle"&gt;&lt;/i&gt;
          &lt;small&gt;Error message&lt;/small&gt;
      &lt;/div&gt;
      &lt;div class="form-control"&gt;
          &lt;label for="country"&gt;Country&lt;/label&gt;&lt;br&gt;
            &lt;select id="cars" name="cars"&gt;
              &lt;option value="austria"&gt;Austria&lt;/option&gt;
              &lt;option value="germany"&gt;Germany&lt;/option&gt;
              &lt;option value="switzerland"&gt;Switzerland&lt;/option&gt;
              &lt;option value="turkey"&gt;TURKEY&lt;/option&gt;
            &lt;/select&gt;
      &lt;/div&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>