On my bootstrap model form with codeigniter if username was entered incorrect it should show message.
But when if I click on button the bootstrap modal goes away even if validation errors are displayed

Goal: What I would like to be able to do is if any form validation true then will not close bootstrap modal but then if form_validation is OK then let me submit.

How to prevent the bootstrap modal from closing if any form validation error.

I have tried using e.preventDefault(); no luck

Model View

<?php if ($users) { ?>

<?php foreach ($users as $user) { ?>

<div class=modal fade id=myModal-<?php echo $user['username']; ?>>

    <div class=modal-dialog>

        <div class=modal-content>

            <div class=modal-header clearfix>

            <div class=pull-left>

            <h2 style=font-size: 18px;>Are you absolutely sure?</h2></div>

            <div class=pull-right>

            <button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>&times;</span></button>

            </div>

            </div>

            <div class=modal-body>

            <div class=alert alert-warning text-center>

                Unexpected bad things will happen if you don't read this! 

            </div>

            <p class=text-center>If you delete this user, this user will not be able to login to the admin,

            and all of his or her user information will be <b>Removed For Ever!</b>

            </p>

            <br/>

            <p>Please type in the username of the user to confirm. <?php echo validation_errors('<div class=text-danger validation>', '</div>'); ?></p>

            <form role=form action=<?php echo $action;?> method=post enctype=multipart/form-data>

                <div class=form-group>

                    <input type=text id=input-user-<?php echo $user['username']; ?> name=username value= class=form-control />

                    <input type=hidden name=user_id value=<?php echo $user['user_id']; ?> class=form-control />

                </div>

                <div class=form-group text-center>

                    <button type=submit id=button-delete-user-<?php echo $user['username']; ?> class=btn btn-user-delete><span class=text-danger>I understand the consequences, deleting this user</span></button>

                </div>

            </form>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

</div><!-- /.modal -->



<!-- Bootstrap Model Form Validation Check --> 

<script type=text/javascript>

$(document).ready(function(){

$('#button-delete-user-<?php echo $user['username']; ?>').on('click', function(e) {

    e.preventDefault();

});

});

</script>



<!-- Enabled Submit Button If Text Is Entered In Input -->

<script>

$(document).ready(function(){

$('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled',true);



    $('#input-user-<?php echo $user['username']; ?>').keyup(function(){

        if($(this).val().length !=0)

        $('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled', false);            

        else

        $('#button-delete-user-<?php echo $user['username']; ?>').attr('disabled',true);

    });

});

</script>



<?php }?>

<?php }?>

Controller Function Delete

public function delete() {

  // Note: Form Validation Library Auto Loaded



    $this->form_validation->set_rules('username', 'Username', 'required|callback_confirm_username_before_delete');

    $this->form_validation->set_rules('user_id', 'User ID Number', 'required|callback_validateForm');



    if ($this->form_validation->run($this) == FALSE) {



        $this->get_list();



    } else {



        $this->delete_user();



        $this->session->set_flashdata('info', 'Your user'.' '. $this->input->post('username') .' '.'was successfully deleted.');

        redirect('admin/user/users');

    }



  }