title: How to validate a form in real time using Java Script
body: <p><a href="http://jsfiddle.net/ZQQS9/2/" rel="nofollow">http://jsfiddle.net/ZQQS9/2/</a></p>
  
  <p>I want to put green ticks next to correct inputs as users fill them up</p>
  
  <p>here's how I have everything set up:</p>
  
  <pre><code>&lt;label&gt;
  &lt;select class="allselect" onChange="check(this.name)" name="typeselect" id="typeselect"&gt;
  &lt;option value="off"&gt;Select...&lt;/option&gt;
  &lt;option value="normalshoes"&gt;normalshoes&lt;/option&gt;
  &lt;option value="smallshoes"&gt;smallshoes&lt;/option&gt;
  &lt;option value="bigshoes"&gt;bigshoes&lt;/option&gt;
  &lt;option value="coats"&gt;coats&lt;/option&gt;
  &lt;option value="regularpants"&gt;regularpants&lt;/option&gt;
  &lt;option value="bigpants"&gt;bigpants&lt;/option&gt;
  &lt;option value="tshirt"&gt;tshirt&lt;/option&gt;
  &lt;option value="long"&gt;long&lt;/option&gt;
  &lt;option value="big"&gt;big&lt;/option&gt;
  &lt;option value="dress"&gt;dress&lt;/option&gt;
  &lt;option value="hats"&gt;hats&lt;/option&gt;
  &lt;option value="bags"&gt;bags&lt;/option&gt;
  &lt;option value="glasses"&gt;glasses&lt;/option&gt;
  &lt;option value="other"&gt;other&lt;/option&gt;    
  &lt;/select&gt; 
  &lt;/label&gt;
  &lt;div id="typeselectIMG" class="status"&gt;&lt;img src="http://oi62.tinypic.com/2d0l214.jpg" alt="OK" class="IMGself"&gt;&lt;/div&gt;
  &lt;div id="secondstep"&gt;
  &lt;input type="text" class="quantity" onKeyPress="check(this.name)"  name="quantity" id="quantity"&gt;    
  &lt;div id="quantityIMG" class="status"&gt;&lt;img src="http://oi62.tinypic.com/2d0l214.jpg" alt="OK" class="IMGself"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>function check(id) {
          var idValue = document.getElementsByName(id)[0];
          var Valueit = idValue.value;
                  if (id == 'typeselect') {
                      if (idValue != '' &amp;&amp; Valueit != 'off') {
                      document.getElementById(id + 'IMG').style.visibility = 'visible';
                      document.getElementById('secondstep').style.visibility = 'visible';
                      }
                      if (Valueit == 'off') {
                      document.getElementById(id + 'IMG').style.visibility = 'hidden';
                      document.getElementById('quantityIMG').style.visibility = 'hidden';
                      document.getElementById('secondstep').style.visibility = 'hidden';
  
                      }
                  }
                  if (id == 'quantity') {
                      function testallthetime() {
                      if (Valueit != '') {
                      document.getElementById(id + 'IMG').style.visibility = 'visible';
                      document.getElementById('secondstep').style.visibility = 'visible';
                      }
                      if (Valueit == '') {
                      document.getElementById(id + 'IMG').style.visibility = 'hidden';
                      document.getElementById('secondstep').style.visibility = 'visible';
                      }
                      }
                      setInterval(testallthetime(),1);
  
                  }
          }
  </code></pre>
  
  <p>Note: first part of JS regarding the select is working correctly as it should, I just can't get the empty text field to stop the green tick from showing.</p>
  
  <p>e.g. when you enter anything in the box, the green tick comes in, so far so good. 
  but if you delete everything you typed and you're left with nothing, the tick is still there, UNLESS you push backspace or del one more time. How can I make this in actual real time for it to detect it and when nothing is there not show the green tick? and vice versa. Any help is appreciated.</p>
  
  <p><a href="http://jsfiddle.net/ZQQS9/2/" rel="nofollow">http://jsfiddle.net/ZQQS9/2/</a></p>