Javascript 如何防止引导模式在使用codeigniter提交表单时关闭？

如果输入不符合表单验证规则，我会在引导模式表单中显示警告消息。无论表单是否验证，我都被卡住了，我想在我的模态表单中的顶部某处显示错误

控制器：Users.php

function create_user() {

 // set validation rules
  $this->form_validation->set_rules('first_name', 'Firstname', 'trim|required|min_length[4]');
  $this->form_validation->set_rules('last_name', 'Lastname', 'trim|required');

  // set validation errors
  $this->form_validation->set_message('required', '%s field is required');
  $this->form_validation->set_message('min_length[4]', '%s min_length');

if ($this->form_validation->run() == FALSE) {
  echo "something";
} else {
  echo "something";
}


  $data = array(
    'first_name' => $this->input->post('first_name'),
    'last_name' => $this->input->post('last_name'),
    'phone' => $this->input->post('phone'),
    'email' => $this->input->post('email')
    );

  $output = $this->user_model->put_user($data);
  if (!$output === TRUE) {
    echo "data saved succesfully";
    // redirect('users', 'refresh');
  } else {
    redirect('users', 'refresh');
  }
}

视图：userList.php

<div class="modal-body">
 <?php echo form_open("users/create_user", $attributes);?>
 <?php echo validation_errors(); ?>
 <div id="error" class="alert alert-info"></div>
 <div class='error_msg'></div>             
   <div class="form-group">
    <label for="first_name" class="col-sm-3 control-label">First Name</label>
      <div class="col-sm-9">
       <?php echo form_input(['id' => 'first_name', 'name' => 'first_name', 
       'class' => 'form-control', 'placeholder' => 'Firstname',
       'value' => set_value('first_name')]); ?>
      </div>
      </div>

      <div class="form-group">
       <label for="last_name" class="col-sm-3 control-label">Last Name</label>
       <div class="col-sm-9">
        <?php echo form_input(['id' => 'last_name', 'name' => 'last_name', 
        'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Lastname', 'value' => $this->input->post('last_name')]); ?>
        </div>
       </div>

      <div class="form-group">
       <label for="phone" class="col-sm-3 control-label">Contact No.</label>
        <div class="col-sm-9">
         <?php echo form_input(['id' => 'phone', 'name' => 'phone', 
         'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Phone', 'value' => $this->input->post('phone')]); ?>
        </div>
       </div>

       <div class="form-group">
        <label for="email" class="col-sm-3 control-label">Email</label>
         <div class="col-sm-9">
          <?php echo form_input(['id' => 'email', 'name' => 'email', 'type' => 'email', 'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Email', 'value' => $this->input->post('email')]); ?>
         </div>
        </div>

       <div class="form-group">
       <label for="password" class="col-sm-3 control-label">Password</label>
        <div class="col-sm-9">
         <?php echo form_input(['id' => 'password', 'name' => 'firs_tname', 'type' => 'password', 'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Password', 'value' => $this->input->post('password')]); ?>
        </div>
       </div>

       <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
         <button type="submit" class="btn btn-default create-user">Create</button>
        </div>
       </div>   
     <?php echo form_close();?>
</div>

名字
姓
联络电话。
电子邮件
密码
创造

JQuery：

$(function() {

        $('#create_user').on('submit', function(event) {
            event.preventDefault();

            $.ajax({
                url: "<?php echo site_url('users/create_user') ?>",
                type: "POST",
                data: {"first_name" : <?php echo $this->input('first_name) ?>}, 
                dataType: "json",
                contentType: "application/json"
            }).done(function(msg) {
                $("#error").text(msg);
            });
        });
    };

$（函数（）{
$（'create#u user'）。在（'submit'，函数（事件）{
event.preventDefault（）；
$.ajax({
url:“”，
类型：“POST”，
数据：{“first_name”：如果您的表单有一个id，那么您的代码应该进行以下更改

$(function() {

    $('#create_user').on('submit', function(event) 
    {
        event.preventDefault();
        event.stopImmediatePropagation();
        alert("test");

        $.ajax({
            url: "<?php echo site_url('users/create_user') ?>",
            type: "POST",
            data: $("#create_user").serialize(), 
            success : function(msg)
            {
                $("#error").text(msg);
            }
        });
    });
};

$（函数（）{
$（'create#u user'）。在（'submit'，函数（事件）
{
event.preventDefault（）；
事件。stopImmediatePropagation（）；
警报（“测试”）；
$.ajax({
url:“”，
类型：“POST”，
数据：$（“#创建_用户”）.serialize（），
成功：功能（msg）
{
$（“#错误”）.text（msg）；
}
});
});
};

您的函数中有一个警报-如果单击“提交”按钮，您必须看到此警报框-如果没有，您知道您的函数不工作
，则您的提交函数似乎未执行。表单的默认行为正在执行，而jQuery代码将被忽略

更改按钮，使其不再是提交按钮，并为其指定一个
id

<button type="button" id="btn-submit" class="btn btn-default create-user">Create</button>

创建

然后更改方法，使其在单击按钮时触发

$(function() {
    $(document).on('click', '#btn-submit' function(event) {
        event.preventDefault();

        $.ajax({
            url: "<?php echo site_url('users/create_user') ?>",
            type: "POST",
            data: {"first_name" : <?php echo $this->input('first_name') ?>}, 
            dataType: "json",
            contentType: "application/json"
        }).done(function(msg) {
            $("#error").text(msg);
        });
    });
};

$（函数（）{
$（文档）。在（'单击'，'btn提交'功能上（事件）{
event.preventDefault（）；
$.ajax({
url:“”，
类型：“POST”，
数据：{“名字”：}，
数据类型：“json”，
contentType:“应用程序/json”
}).done（函数（msg）{
$（“#错误”）.text（msg）；
});
});
};

这应该会让你朝着正确的方向前进。
可能你需要使用ajax来提交表单或在模型体内使用iframe。我确实使用了ajax，但没有运气，或者我遗漏了一些东西。请提供javascript代码好吗？@kasynych，我更新了问题。在下面的字符串“first\u name”中缺少撇号）？>应该是“first\u name”谢谢，我会查出来的。很遗憾，这不起作用。应该有东西处理codeigniter表单验证，就像“if语句”一样运行。你收到警告消息了吗？我相信你的表单不是通过AJAX调用提交的，而是一个常规的http表单提交请求，之后你的页面将被重新加载。在浏览器中检查你的表单元素是否有任何方法可能会推翻你的AJAX表单提交。幸运的是，没有运气。谢谢。实际上，我的代码现在只使用php，但我会给它打分，因为它也能工作。