title: How can I read value and validate password length in javascript using keyup?
body: <p>I would like to validate my input box for a password using javascript/jquery.
  The passwords needs to be 9 or more characters. I need to use keyup and count user input. If the input is under 9 characters there should be an error message under the input box. if there is more than 9 characters, then the error message should turn into a submit button. I kind of understand to get length, but I dont think I am doing it right. All help is appreciated. Here is some code:</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>&lt; script &gt;
    function checkInput(value) {
      document.getElementById('#password').value.length
      var minLength = 9;
      if (value.length &lt; minLength) {
        //not sure
        else {
  
          return true;
        }
      }
  
  
      &lt;
      /script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Email List&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;style type="text/css"&gt;
      * {
        margin: 0;
        padding: 0;
        font-family: Arial;
        box-sizing: border-box
      }
      
      body {
        text-align: center;
      }
      
      header {
        padding: 50px;
        color: black;
        font-size: 20pt
      }
      
      section {
        width: 700px;
        margin: 0 auto;
      }
      
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
      }
      
      ul li {
        cursor: pointer;
        position: relative;
        padding: 12px 8px 12px 40px;
        background: #FF6D1F;
        font-size: 18px;
        transition: 0.2s;
        text-align: left;
        user-select: none;
      }
      
      ul li:nth-child(odd) {
        background: #FA5B0F;
      }
      
      ul li:hover {
        background: #FF822E;
      }
      
      ul li.checked {
        background: #FF822E;
        color: #fff;
        text-decoration: line-through;
      }
      
      ul li.checked::before {
        content: '';
        position: absolute;
        border-color: #fff;
        border-style: solid;
        border-width: 0 2px 2px 0;
        top: 10px;
        left: 16px;
        transform: rotate(45deg);
        height: 15px;
        width: 7px;
      }
      
      .close {
        position: absolute;
        right: 0;
        top: 0;
        padding: 12px 16px 12px 16px;
        display: none;
        background-color: #f44336;
      }
      
      .close:hover {
        color: white;
      }
      
      form {
        padding: 0;
        margin-top: 20px;
        width: 100%;
        overflow: hidden;
      }
      
      input {
        height: 56px;
        line-height: 56px;
        margin-right: 0;
        display: inline-block;
        float: left;
        width: 90%;
        font-size: 18px;
        padding: 12px 8px 12px 40px;
        outline: 0;
      }
      
      .btn {
        display: inline-block;
        background-color: green;
        width: 10%;
        padding: 9.5px;
        font-size: 32px;
        cursor: pointer;
        background-color: #FA5B0F;
      }
      
      .btn:hover {
        color: white;
        background-color: #ff931e;
      }
      
      #lblError {
        background-color: #000;
        color: white;
        height: 56px;
        line-height: 56px;
        display: none;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;h1&gt;Create A New Password&lt;/h1&gt;
    &lt;/header&gt;
  
    &lt;section&gt;
  
  
      &lt;form&gt;
        &lt;input type="password" id="password" placeholder="Enter a password" autocomplete="off"&gt;
  
      &lt;/form&gt;
  
      &lt;div id="lblError"&gt;Please enter a password longer than 9 characters!&lt;/div&gt;
    &lt;/section&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Feel free to ask for any clarification. Thank you!</p>