如何防止使用codeigniter提交表单上的bootstrap模式？

Question

I have some issues about displaying alert message inside a bootstrap modal form if inputs doesn't meet the form validation rule. I'm stuck whether the form validates or not and I wanted to display the error inside my modal form, somewhere at the top.

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

View: 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);
            });
        });
    };

I tried jquery prevent default but It seems not working for me or I have some mistakes writing the code. Any help would be much appreciated.

Answer 1

It looks like your submit function is not executing. The default behavior of the form is executing and your jQuery code is ignored.

Change the button so that it is no longer a submit button and give it an id.

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

Then change your method so that it triggers when you click the 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);
        });
    });
};

That should get you going in the right direction.