CODEWITHSUNDEEP
javascriptjquery
X-men
X-men

Reputation: 69

Jquery validate with fade in and hide

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.

enter image description here

Upvotes: 1

Views: 460

Answers (5)

Elyor
Elyor

Reputation: 865

Try this logic,

1)Change jQuery Source:

 $(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').fadeIn("slow");
 $('#cross').fadeOut("slow");
}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'); 
    $('#cross').fadeIn("slow");
    $('#tick').fadeOut("slow");
    }else{
    $('#username').css('border', '3px #090 solid');
     $('#tick').fadeIn("slow");
      $('#cross').fadeOut("slow");
         }
}
});
}
}

2)And HTML source:

 <input type="text" name="username" id="username" class="input">
        <img id="tick" src="images/tick.png" alt="Tick" style="display: none" width="16"
            height="16" />
        <img id="cross" src="images/cross.png" alt="Cross" style="display: none" width="16"
            height="16" />

Upvotes: 0

gokul
gokul

Reputation: 305

$(document).ready(function(){
$("#tick").hide();
$("#cross").hide();
});

you can use this if you need jquery or use display:none in css. visibility:hidden; can also be used full jquery script

<script>
$(document).ready(function(){
$("#tick").hide();
$("#cross").hide();
$('#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();
         }
}
});
}
}
</script>

Upvotes: 0

Vivek S
Vivek S

Reputation: 5540

<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"/>

$(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');
$('#cross').fadein();  //changed
}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();  //changed

}else{
$('#username').css('border', '3px #090 solid');
$('#cross').hide();
$('#tick').fadeIn();// changed
     }
}
});
}
}

Upvotes: 0

Dan
Dan

Reputation: 5637

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;
}

Upvotes: 2

Tom Naessens
Tom Naessens

Reputation: 1837

In your css, put the attribute: display: hidden; on both the tick and the cross. This will make sure they are hidden when you first load the page. After typing in a username, the fadeIn will set the display to your needs.

Upvotes: 0

Related Questions