ajax中的Codeigniter表单验证

Question

如果验证运行错误，我如何返回查看页面和模态验证错误..

我想在模态中显示验证错误..

我是 jquery ajax 的新手..

是否需要在我的 jquery 中添加 .. 或者我该怎么做呢..

控制器

public function update(){

    $this->form_validation->set_rules('lname', 'Family Name', 'required');

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

    }
    else {

        $this->home_model->update();
        redirect(base_url());
    }
}

jQuery

$(document).on('click', '#update', function() {
        console.log($(this).attr('data-registerid'));
        $.ajax({
            url: "<?php echo base_url('home/get_data')?>",
            type: "POST",
            dataType: "JSON",
            data: {
                "id": $(this).attr('data-registerid')
            },
            success: function(data) {
                console.log(data);
                $('#no').val(data.rec['no']);
                $('#lname_edit').val(data.rec['lname']);
                $('#fname_edit').val(data.rec['fname']);
                $('#mi_edit').val(data.rec['mi']);
                $('#bdate_edit').val(data.rec['bdate']);
                $('#module_edit').val(data.rec['module']);
                $('.updatemodal').modal({
                    backdrop: 'static',
                    keyboard: false
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error get data from ajax');
            }
        });
    });

Answer 1

要将表单验证状态传递给客户端，请在控制器中使用以下代码。代码以 json 格式的错误和通知文本响应。

if ($this->form_validation->run() == FALSE) {
    $json_response['form_errors'] = $this->form_validation->error_array();
    exit(json_encode($json_response));
}

客户端，在您的 jquery ajax 成功处理程序中，您可以使用以下代码，以便将服务器端发出的状态响应显示给客户端。

if (data.form_errors != undefined) {
  var errors = '';
  $.each(data.form_errors, function(i, val) {
    errors = errors + "\n" + val;
  });
  if (errors != "") alert(errors);
} 
else {
  alert('no error(s) in form... submit form..');
}

上述js代码的替代方案：

要在每个表单元素更改时更新它们的状态，请使用以下代码。将其放在表单提交处理程序之外。

function update_form_validation() { 
  $("input,select,textarea").on("change paste keyup", function() {
    if ($(this).is(':checkbox') == true) {
      $(this).siblings("label:last").next(".text-danger").remove();
    } else if ($(this).is(':radio') == true) {
      $(this).siblings('input[type="radio"][name="' + $(this).attr('name') + '"]:last').next(".text-danger").remove();
      $(this).next(".text-danger").remove();
    } else {
      $(this).next(".text-danger").remove();
    }
  });
}
update_form_validation();

用于显示一般通知并在其各自的表单元素之后显示每个错误和通知，
使用下面的代码。在您的表单提交处理程序中，将代码放在您的 ajax 成功函数中。

if (data.form_errors != undefined) {
  $.each(data.form_errors, function(i, val) {
    if ($('input[name="' + i + '"]').is(':hidden') == false) {
      if ($('input[name="' + i + '"]').is(':radio') == true) {
        $('input[name="' + i + '"]:last').after('<div class="text-danger">' + val + '</div>');

      } else if ($('input[name="' + i + '"]').is(':checkbox') == true) {
        $('input[name="' + i + '"]').siblings("label:last").after('<div class="text-danger">' + val + '</div>');
      } else {
        $('input[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
        $('select[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
        $('textarea[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
      }
    }
  });
} else {
  alert('no errors in form... submit form..');
}

Answer 2

You can use CodeIgniter form validations function :



 $errors = array();
if ($this->form_validation->run() == FALSE) {
   $errors['validation_error'] = validation_errors();
   echo json_encode($errors);
   exit();
}

Now in jquery:



 $(document).on('click', '#update', function() {
        console.log($(this).attr('data-registerid'));
        $.ajax({
            url: "<?php echo base_url('home/get_data')?>",
            type: "POST",
            dataType: "JSON",
            data: {
                "id": $(this).attr('data-registerid')
            },
            success: function(data) {
                var myObj = JSON.parse(data);
                $('#error_div').html(myObj.validation_error);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error get data from ajax');
            }
        });
    });

Answer 3

查看

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h5 class="modal-title">Login Form</h5>
      </div>
      <div class="modal-body">

        <div id="modelError"></div>

        <form method="post" action="javascript:void(0)"> 
            <div class="input-group">
                <input type="text" name="name" id="name" placeholder="First Name">
            </div>
              <div class="input-group">
                <input type="text" name="last_name" id="last_name" placeholder="Last Name">
            </div>
            <input type="submit" id="my_form" name="Save">
        </form>
      </div>
    </div>
  </div>
</div>

脚本

 <script>
$('#my_form').click(function(){
  $.ajax({
        url: "<?php echo base_url('controller/function')?>",
        type: "POST",
        data: {
            'name': $('#name').val(),
            'last_name': $('#last_name').val(),
        },
        success: function(data) {
            var myObj = JSON.parse(data);           
            var msg = '<div class="alert alert-danger alert-dismissable">'+myObj.error+'</div>';
              $('#modelError').html(msg);
        },
        error: function() {
            alert('Error get data from ajax');
        }
    });       
});
</script>

控制器

public function insert()
{
    if(isset($this->input->post())){
        $this->form_validation->set_rules('name','Name','required');
        $this->form_validation->set_rules('last_name','Last Name','required');
        if ($this->form_validation->run() == FALSE)
        {
            $this->msg['error'] = validation_errors();
            echo json_encode($this->msg);
        }else{

            $this->your_model->insert($this->input->post());
            redirect(base_url());
        }
    }else{
        $this->load->view('view-page');
    }    
}