javascript - 具有 Codeigniter 表单验证的 Bootstrap 模态

Question

在我使用 codeigniter 的引导模型表单上，如果用户名输入不正确，它应该显示消息。 但是当我点击按钮时，即使显示验证错误，引导模式也会消失

目标:我希望能够做的是，如果任何表单验证为真，则不会关闭引导模式，但如果 form_validation 正常，则让我提交。

如果出现任何表单验证错误，如何防止引导模式关闭。

我试过使用 e.preventDefault(); 没有成功

模型 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 函数删除

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');
    }

  }

Answer 1

Error_validation 是 CI 提供的功能。

您只能在提交页面时使用代码点火器的 error_validation，因此，引导模式会自动关闭，因为页面正在提交。

如果你想在模式上执行表单验证，最好使用 AJAX

如果你想在 form_open 上方显示错误信息， 只需制作一个空白的 div，例如:

<div class='error_msg'>

</div>

和 jquery:

$(function(){

$('#form_id').submit(function(event){
event.preventDefault();
var custemail = $('#email_id').val();
var custname = $('#name').val();

$.ajax({
        type: 'POST',
        url: your controller path,
        data: {
         'name': custname,
         'email': custemail

        },
        dataType: 'html',
        success: function(results){
             if(something not as you expected){
              $('.error_msg').html('error msg');
              return false;
             }
        }
  });


});

});