Strange stuffs met when writing a webpage

Actually I am working on a sign up page. I want to check if the columns for inputting realname and email etc are valid or not. When the input are invalid, I will just directly display the error message under the input field. However, I found out the .html function is only displaying the message for a second and then disappeared. I need some help. Thanks

function register(){
    var name = $('#name').val();
    var username = $('#username').val();
    var mail = $('#mail').val();
    var pass = $('#pass').val();
    if (username.trim() != '')
    {
        if (name.trim() != '')
        {
            $.post("checkusername.php", {name: name},
                function(result){
                    if (result == 1)
                    {
                        if (pass.trim() != '')
                        {
                            if (filter_var($mail, FILTER_VALIDATE_EMAIL))
                            {
                                $.post("register.php"), {realname: username, nickname: name, email: mail, password: pass};
                                window.location.replace("login.php");
                            }
                            else
                            {
                                $('#email').html("<br>Invalid");
                                $('#email').css({"color":"red", "font-weight":"bold"});
                            }
                        }
                        else
                        {
                            $('#pas').html("<br>Cannot Be Empty");
                            $('#pas').css({"color":"red", "font-weight":"bold"});
                        }
                    }
                    else
                    {
                        $('#result').html("<br>Not Available");
                        $('#result').css({"color":"red", "font-weight":"bold"});
                    }
                });
        }
        else
        {
            $('#result').html("<br>Cannot Be Empty");
            $('#result').css({"color":"red", "font-weight":"bold"});
        }
    }
    else
    {
        $('#result1').html("<br>Cannot Be Empty");
        $('#result1').css({"color":"red", "font-weight":"bold"});
    }
}