html - how to avoid closing modal window if there is invalid entry?

Question

I am using twitter bootstrap modal window. I validate the name field using jquery. When the name field is empty, I display the error in my modal. If the name field is empty, I want to display the error and modal window shouldn't close.

<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary action_compute" data-dismiss="modal">Save changes</a>

$('.action_compute').click(function() {
  if($('#username').val() == ""){
    $(this).attr('data-dismiss', '');
    $('#show_error').show();
  }else {
    $(this).attr('data-dismiss', 'modal');
    $(this).parents('.modal').modal('hide');
  }
});

Answer 1

You can try returning false to cancel the default behavior of the click (to close the modal), no need to remove the attribute.

$('.action_compute').click(function() {
    if($('#username').val() == ""){
        $('#show_error').show();
        return false;
    }
});

Working fiddle