Codeigniter 中关于 ajax 表单提交的表单验证

Question

我是 codeigniter 和 javascript 的新手，我一直在使用 codeigniter 中的 ajax 提交表单。我需要对表单中的文本字段和其他输入使用表单验证。我在网上搜索并找不到任何资源或参考资料。目前我的表单提交工作正常，我只需要使用 Jquery 或 ajax 验证我的输入。

这是我的模型

class test_model extends CI_Model {
    function save_data()
        {
            $name = $this->input->post('Name');
            $email = $this->input->post('Email');
            $contact = $this->input->post('Contact');
            $sex = $this->input->post('Sex');
            $country = $this->input->post('Country');   
            $data = array(
                'Name' => $name,
                'Email' => $email,
                'Contact' => $contact,
                'Sex' => $sex,
                'Country' => $country);
            $result = $this->db->insert('test2',$data);
            return $result;
        }
     }

我的控制器只是将数据转发给模型

class test extends CI_Controller {
    function __construct() {
        parent::__construct();
        $this->load->model('test_model');
        $this->load->helper('url');
    }
    function index() {
        $this->load->view('test_index');
    }       
    function save() { 
        $data = $this->test_model->save_data();
        echo json_encode($data);        
    }
}

这是我的观点

<form>
    <div class="container" style="padding-top: 80px;">

        <div class="form-group">
            <label for="Name">First Name :</label>
            <div class="col-md-4">
                <input type="text" name="Name" id="Name" class="form-control" placeholder="Your Name..">
            </div>
        </div>

        <div class="form-group">
            <label for="Contact">Contact :</label>
            <div class="col-md-4">
                <input type="text" class="form-control" id="Contact" name="Contact" placeholder="Your Contact No..">
            </div>
        </div>

        <div class="form-group">
            <label for="Sex" class="col-md-1">Gender :</label>
            <div class="form-check form-check-inline">
                <label >
                <input type="radio" class="form-check-input" name="Sex" id="Sex" value="Male">Male  </label><span style="padding-right: 10px;"></span>

                <label>
                <input type="radio" class="form-check-input" name="Sex" id="Sex" value="Female">Female </label>
            </div>
        </div>

            <div class="form-group">
                <select class="form-control custom-select col-md-4" id="Country" name="Country">
                    <option value="">Select Country</option>
                    <option value="Europe">Europe</option>
                    <option value="United Stated of America">United States of America</option>
                    <option value="India">India</option>
                </select>
            </div>

        <div class="form-group">
            <button type="button" type="submit" id="btn_save" class="btn btn-primary" >
                <span class="spinner-border spinner-border-sm"></span>Create</button>
            <button type="button"  class="btn btn-secondary" >Close</button>
        </div>
    </div>
</form>

我的 JS 代码如下：

$('#btn_save').on('click',function() {
                    var Name = $('#Name').val();
                    var Email = $('#Email').val();
                    var Contact = $('#Contact').val();
                    var Sex = $('input[name="Sex"]:checked').val();
                    var Country = $('#Country').find(":selected").val();
                    $.ajax({
                        type : "POST",
                        url : "https://localhost/newCrud/test/save",
                        dataType : "JSON",
                        data: {"Name":Name, "Email":Email, "Contact":Contact, "Sex":Sex, "Country":Country},
                        success : function (data) {
                            if(data == 1) {
                                $('[name = "Name"]').val("");
                                $('[name = "Email"]').val("");
                                $('[name = "Contact"]').val("");
                                $('[name = "Sex"]').val("");
                                $('[name = "Country"]').val();

                                alert("Data Inserted"); }
                        }
                    });
                    return false;
                });
        });

伙计们，我上面的代码工作得很好，我需要你的帮助来了解如何使用 ajax 验证我的表单，因为它已经从这里将数据传递给模型。据我所知，Codeigniter form_validate 方法不能用于 ajax 表单提交。真的需要你们的帮助。感谢您的时间和建议。

Answer 1

为什么不呢？？？？

您可以使用CI validation，因为它是一种内置的服务器端验证方法，并且您通过AJAX

访问您的服务器

你需要稍微修改一下你的代码

$.ajax({
    type : "POST",
    url : "https://localhost/newCrud/test/save",
    dataType : "JSON",
    data: {"Name":Name, "Email":Email, "Contact":Contact, "Sex":Sex, "Country":Country},
    success : function (data) {
        if(data == 1) {
            $('.form-group').removeClass('has-error');
            $('[name = "Name"]').val("");
            $('[name = "Email"]').val("");
            $('[name = "Contact"]').val("");
            $('[name = "Sex"]').val("");
            $('[name = "Country"]').val();

            alert("Data Inserted"); 
        }
    },
    error : function (error) {
      if(error.status == 500){
        var response = error.responseJSON.validation;
        $('.form-group').removeClass('has-error');
        $.each(response, function(index, item) {
            $('[name='+index+']').closest('.form-group').addClass('has-error');
        });
      }
    }

});

像这样更新你的控制器

public function save() { 
  // add this if not loaded earlier
  $this->load->library('form_validation');

  $this->form_validation->set_rules('Name','Name', 'required');
  $this->form_validation->set_rules('Contact','Contact', 'required');
  $this->form_validation->set_rules('Email','Email Address','required|valid_email');
  if ($this->form_validation->run() == FALSE) {
      $validation = $this->form_validation->error_array();
      return $this->output
              ->set_content_type('application/json')
              ->set_status_header(500)
              ->set_output( json_encode(array(
                  'validation' => $validation,
                  'message' => 'validation error !!!'
              )) );
  } 

  $data = $this->test_model->save_data();
  echo json_encode($data);        
}

在这里，我对 3 个字段名称、电子邮件和联系方式进行了验证。我还使用引导错误类“has-error”来突出显示失败的元素。

Answer 2

只需使用 jQuery Validate 插件 (https://jqueryvalidation.org/)。

jQuery:

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
    rules: {
        field1: {
            required: true,
            email: true
        },
        field2: {
            required: true,
            minlength: 5
        }
    }
});

});

HTML：

<form id="myform">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>