Question

I have a JS validation code like this :

$(document).ready(function(){
    $('#username').keyup(username_check);
}); 

function username_check(){  
    var username = $('#username').val();
    if(username == "" || username.length < 4){
        $('#username').css('border', '3px #CCC solid');
        $('#tick').hide();
    }else{
        jQuery.ajax({
            type: "POST",
            url: "check_username.php",
            data: 'username='+ username,
            cache: false,
            success: function(response){
                if(response == 1){
            $('#username').css('border', '3px #C33 solid'); 
            $('#tick').hide();
            $('#cross').fadeIn();
                }else{
            $('#username').css('border', '3px #090 solid');
            $('#cross').hide();
            $('#tick').fadeIn();
                }
            }
        });
    }
}

HTML Code :

<input type="text" name="username" id="username" class="input">
<img id="tick" src="images/tick.png" width="16" height="16"/>
<img id="cross" src="images/cross.png" width="16" height="16"/>

This code working good but now I want the image should be hide before validation. Below is the screenshot.

Answer 1

Although this could be done with JavaScript, it’s better to use CSS. JavaScript is loaded last on the page which means that the images will appear and then disappear once the JavaScript has run.

The quick and dirty method would be to do:

<img id="tick" src="images/tick.png" width="16" height="16" style="display:none"/>
<img id="cross" src="images/cross.png" width="16" height="16" style="display:none"/>

But it would be nicer to add a CSS class like so:

<img id="tick" src="images/tick.png" width="16" height="16" class="hider"/>
<img id="cross" src="images/cross.png" width="16" height="16" class="hider"/>

Then in CSS:

.hider {
    display:none;
}