How to validate a form in real time using Java Script

Question

http://jsfiddle.net/ZQQS9/2/

I want to put green ticks next to correct inputs as users fill them up

here's how I have everything set up:

<label>
<select class="allselect" onChange="check(this.name)" name="typeselect" id="typeselect">
<option value="off">Select...</option>
<option value="normalshoes">normalshoes</option>
<option value="smallshoes">smallshoes</option>
<option value="bigshoes">bigshoes</option>
<option value="coats">coats</option>
<option value="regularpants">regularpants</option>
<option value="bigpants">bigpants</option>
<option value="tshirt">tshirt</option>
<option value="long">long</option>
<option value="big">big</option>
<option value="dress">dress</option>
<option value="hats">hats</option>
<option value="bags">bags</option>
<option value="glasses">glasses</option>
<option value="other">other</option>    
</select> 
</label>
<div id="typeselectIMG" class="status"><img src="http://oi62.tinypic.com/2d0l214.jpg" alt="OK" class="IMGself"></div>
<div id="secondstep">
<input type="text" class="quantity" onKeyPress="check(this.name)"  name="quantity" id="quantity">    
<div id="quantityIMG" class="status"><img src="http://oi62.tinypic.com/2d0l214.jpg" alt="OK" class="IMGself"></div>
</div>

and JS:

function check(id) {
        var idValue = document.getElementsByName(id)[0];
        var Valueit = idValue.value;
                if (id == 'typeselect') {
                    if (idValue != '' && 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);

                }
        }

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.

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.

http://jsfiddle.net/ZQQS9/2/

Answer 1

jsFiddle Demo

There are a few things going on here. First, do not use a timer to check for input changes, it is really bad practice. It is harsh on the user's computer and too much of it will jar the user experience.

Further, it is best practice to use unobtrusive javascript. This means factoring out your event handlers into the code instead of on the elements. In order to do that, you are going to want to wait for the page to load (inside of a window.load event will work).

To recap, use oninput to check for changes, remove the timer, use unobtrusive javascript inside of an onload event, and you should be good. Here is how it should look:

//onload event
window.onload = function(){
  //get elements  
  var typeselect = document.getElementById("typeselect");
  var typeImg = document.getElementById('typeselectIMG');
  var secondstep = document.getElementById("secondstep"); 
  var quantInput = document.getElementById("quantity");
  var quantImg = document.getElementById("quantityIMG");
  //select event
  typeselect.onchange = function(){
   if( this.value != 'off' ){
    typeImg.style.visibility = 'visible';
    secondstep.style.visibility = 'visible';
   }else{
    typeImg.style.visibility = 'hidden';
    quantImg.style.visibility = 'hidden';
    secondstep.style.visibility = 'hidden';
   }
  };
  //input changed event
  quantInput.oninput = function(){
    if(this.value != ''){
     quantImg.style.visibility = 'visible';     
    }else{
     quantImg.style.visibility = 'hidden';
    }
  };
};

Answer 2

Wrap the body of check() in a call to setTimeout. The event handler fires before the new value of the field is available, allowing you to prevent it from being applied. Calling setTimeout schedules your code to execute a moment later, when the value is available.

There is no need for the setInterval later on, calling testallthetime. You set Valueit in the outer scope and it's not going to change no matter how many times you check it.