Ajax中的Codeigniter表单验证

Question

如果验证运行为false，如何返回验证错误的视图页面和模式。

我想在模式中显示验证错误。

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