如何防止引导模态在使用Codeigniter提交的表单上关闭？

debugcn 发表于 Dev

克劳迪奥斯

如果输入不符合表单验证规则，我会遇到一些有关在引导模式表单中显示警报消息的问题。无论表单是否通过验证，我都陷入困境，我想在模态表单内部的顶部显示错误。

控制器：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);
            });
        });
    };

我尝试使用jquery阻止默认值，但它似乎对我不起作用，或者我在编写代码时遇到了一些错误。任何帮助将非常感激。

鞭舞者

看来您的Submit函数未执行。表单的默认行为正在执行，并且您的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);
        });
    });
};

那应该使您朝正确的方向前进。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。