根据发现的错误显示不同的Bootstrap警报消息？

Question

I not exactly sure how to example this but here goes !

I am wanting to add alert messages into a website I am creating. Examples can be found here:

Examples of Alert Messages

Depending on inputs from a form I want to display different messages. So php checks for correct inputs and fields selected.

Examples of Messages:

1) Alert Danger - a password must be between 6 and 16 character long and include letters and numbers

2) Alert Warning - Update your profile.

I want all these messages to be display within the same div tag - message-warning-display.

<div class="message-warning-display" display:"hide">
      <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong> There was a problem with your network connection.
      </div>
</div>

I imagine it is something to with php calling a particular JavaScript function which is called and then shows the message / set the display to show instead of hide.

Answer 1

One way of doing it would be like:

Add this to you HTML:

<div id="alert" class="message-danger-display" style="display:none">
      <div class="alert alert-warning">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
         <p></p>
     </div>
 </div>

YOUR JQUERY PART

$('YOUR FORM').submit(function(e){
     $('#alert').attr('style','display:none');  
     $('#alert .alert p').html();      
     if('YOUR_DANGER_ALERT_CONDITION'){
           var msg = '<strong>Error!</strong> There was a problem with your network connection.';
           $('#alert .alert p').html(msg);  
           $('#alert').removeClass();
           $('#alert').addClass('message-danger-display');
           $('#alert').removeAttr('style');
           e.preventDefault();
     }else if('YOUR_WARNING_ALERT_CONDITION'){
           var msg = '<strong>Warning!</strong> There was a problem with your network connection.';
           $('#alert .alert p').html(msg);  
           $('#alert').removeClass();
           $('#alert').addClass('message-warning-display');
           $('#alert').removeAttr('style');
           e.preventDefault();
     }
});