twitter bootstrap alert hide on initialization

Question

I am using twitter bootstrap for my alerts and I want an alert to appear when there is an error in the inputs. I can hide it on initialization and show it once an error occurs. But after that the alert disappears again. is there any way to ensure that the alert stays there until the correct input is given

<div class="span4">  
                <div class="alert alert-error  fade in" id = "user_name_exist" >  
                   <button type="button" class="close">×</button>
                  <h4 class="alert-heading">Username error!</h4>  
                    The username entered is used by another user. Please choose another one!
                </div>  
</div>  

anyone can help me?

Answer 1

For what it's worth, I'm not a fan of editing downloaded packages. I have the same thing on my end but what I did was just remove the data-dismiss="alert" part of the close button. Then used basically the same code that Nintin has above to hide the alert.

HTML code

<div id="AddAlert" class="alert alert-block" style="display:none;">
  <button type="button" class="close">&times;</button>
  <h4 id="AddAlertH4">Error</h4>
  <div id="AddAlertMessage">My error message goes here.</div>
</div>

JS code

$(".close").click(function(){
    $("#AddAlert").hide();
});

I also dynamically populate my error messages using PHP but I didn't outline that here as it's not part of the question.