Question

Got a slight problem here. I have a form for a guestbook and each input gets validated so that is its empty, an error message appears. I have adjusted the jquery section so that the error message is delayed for 2 seconds, before fading out as shown below:

$(document).ready(function(){

var working = false;

$('#addCommentForm').submit(function(e){

    e.preventDefault();
    if(working) return false;

    working = true;
    $('#submit').val('Working..');
    $('.error').remove();

    $.post('submit.php',$(this).serialize(),function(msg){

        working = false;
        $('#submit').val('Submit');

        if(msg.status){

            $(msg.html).hide().insertAfter('#new').slideDown();
            $('#body').val('');
        }


        else {
            /* This is the section im stuck with */
            $.each(msg.errors,function(k,v){
                $('[for='+k+']').append('<div class="error">'+v+'</div>').delay(2000).fadeOut();
            });

        }

    },'json');

});

});

However, after the error message fades out, the label also disappears. I have the feeling its to do with this part of the code:

'[for='+k+']'

Is there any way I can get around this, so that only the error message fades out rather than the label too?

Should you require any more code from me, please let me know.

Answer 1

You’re right :

$('[for='+k+']').append('<div class="error">'+v+'</div>').delay(2000).fadeOut();

means you append an element, wait, and fadeOut any element with [for=…] selected.

A solution could be using appendTo()

$('<div class="error">'+v+'</div>').appendTo('[for='+k+']').delay(2000).fadeOut();