Question

I am trying to display an error text using jQuery, when the username field is blank. This is not the problem, because I have done this already. The problem is that after the error text shows, I want to click the username field and hide the error text div, so that I can be able to reshow the error if the field is still blank using jQuery.

When I set the visibility to hidden in CSS using jQuery it automaticlly adds an display: hidden when I look at the code in Google Chrome’s inspector.

The code is in: http://albsocial.net84.net/

<?php include ("php/head.php"); ?>
<div id="wrapper">

    <div id="container">

        <div id="intro">

            <h2><center>Are you a member? Login ...</center></h2>
            <h3><center>And enjoy hundreds of services.</center></h3>



            <div id="log_form">

                <form action="php/login.php" method="post" class="login_form">

                    <input type="text" size="25" name="log_uname"
                           id="login_txt" placeholder="Your Username">
                    <input type="password" size="25" name="log_password" id="login_pass" placeholder="Your Password">
                    <label id="check"><input type="checkbox" name="checkbox">         Remember Me</label>
                    <input type="submit" name="submit1" id="login_sub" value="LogIn">
                    <img id="loading1" src="images/ajax-loader.gif" alt="working.." />



                    <script>
                        $('#login_txt').click(function (e) {
                            e.preventDefault();
                            $('#error1').fadeOut('fast', function () {
                                $(this).css("visibility","hidden");
                            });
                        });             
                    </script>

                </form>

                <div id="error1"></div>
            </div>

            <div id="new_users">
                <h4 class="h4_users">New Users ...</h4>

                <a href="#"><img src="#" width="55" height="55"></a>
                <a href="#"><img src="#" width="55" height="55"></a>
                <a href="#"><img src="#" width="55" height="55"></a>
                <a href="#"><img src="#" width="55" height="55"></a>
            </div>

        </div>

        <div id="register">
            <h2><center>Sign up Below ...</center></h2>
            <h3><center>Easy, fast and free!</center></h3>

            <form action="php/register.php" method="post" name="form" class="form">
                <input type="text" size="25" name="fname" placeholder="First Name">
                <input type="text" size="25" name="lname" placeholder="Last Name">
                <input type="text" size="25" name="username" placeholder="Username">
                <input type="text" size="25" name="email" placeholder="Email">
                <input type="text" size="25" name="email2" placeholder="Repeat Email">
                <input type="password" size="25" name="password" placeholder="Password">
                <input type="password" size="25" name="password2" placeholder="Repeat Password">
                <input type="submit" name="submit" id="sub" value="Sign Up!">
                <img id="loading" src="images/ajax-loader.gif" alt="working.." />
            </form>
            <div id="error"></div>
        </div>
    </div>

    <?php include("php/footer.php"); ?>

and the code im using to actually show or create the error code

$(document).ready(function(){

    $('.form').submit(function(e) {
        register();
        e.preventDefault();
    });

    $('.login_form').submit(function(e) {
        login();
        e.preventDefault();
    });

});

function register(){
    hideshow('loading',1);
    error(0);

    $.ajax({
        type: "POST",
        url: "php/register.php",
        data: $('.form').serialize(),
        dataType: "json",
        success: function(msg){
            if(parseInt(msg.status)==1){
                window.location=msg.txt;
            } else if(parseInt(msg.status)==0) {
                error(1,msg.txt);
            }
            hideshow('loading',0);
        }
    });
}

function login(){
    hideshow1('loading1',1);
    error1(0);

    $.ajax({
        type: "POST",
        url: "php/login.php",
        data: $('.login_form').serialize(),
        dataType: "json",
        success: function(msg1){
            if(parseInt(msg1.status1)==1){
                window.location=msg1.txt1;
            } else if (parseInt(msg1.status1) == 0) {
                error1(1,msg1.txt1);
            }
            hideshow1('loading1',0)
        }
    });
}
function hideshow(el,act){
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}
function error(act,txt){
    hideshow('error',act);
    if(txt) $('#error').html(txt);
}
function hideshow1(el,act){
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}
function error1(act,txt1){
    hideshow1('error1',act);
    if(txt1) $('#error1').html(txt1);
}

Answer 1

try

$('#error1').fadeOut('fast', function () {
   $(this).show()
   $(this).css("visibility","hidden")    
})

because fadeOut sets display:none; and you are also working with the visibility attribute, get rid of visibility and use .show() and .hide() instead