在 codeigniter 中使用 jquery ajax 进行表单验证
Posted
技术标签:
【中文标题】在 codeigniter 中使用 jquery ajax 进行表单验证【英文标题】:Do form validation with jquery ajax in codeigniter 【发布时间】:2016-09-08 05:26:51 【问题描述】:如果我不想刷新页面,如何在 codeigniter 中进行表单验证? 基本上我这样做:
$config = array(
array(
'field' => 'c_name',
'label' => 'Name',
'rules' => 'trim|required'
),
array(
'field' => 'c_job',
'label' => 'Job',
'rules' => 'trim|required',
)
);
$this->form_validation->set_rules($config);
if($this->form_validation->run() == true)
$this->load->model('model');
//.....
else
$this->load->view('view');
但是如果我使用 ajax 发送数据并且页面没有刷新,我该如何进行表单验证?
编辑:
感谢@Amra Kojon。这很好并且有效,但新问题是这样的:
if ($this->form_validation->run() == FALSE)
echo validation_errors();
else
//echo 'hi';
$value = $this->input->post('value');
$values = array(
'c_name' => $value['c_name'],
'c_job'=> $value['c_job'],
'c_address'=> $value['c_address'],
'c_phone'=> $value['c_phone'],
'c_mail'=> $value['c_mail'],
'c_state'=> $value['c_state'],
'c_intrest'=> $value['c_intrest'],
'c_added_info'=> $value['c_added_info']
);
$add = $this->customers_model->add_customer($values);
echo $add;
如果我只是在 else 部分中说 echo "something",它可以工作并且如果验证正常,它会回显 hi 但是如果我在数据库中编写主题(值数组有数据而不是 ajax 方式,它会插入日期),它不起作用,其他部分不起作用!!!
【问题讨论】:
如果你使用 ajax 使用 jquery 验证。 在浏览器端简单使用 Jquery 验证,并在 codeigniter 中使用服务器端验证 【参考方案1】:如果你提供了你的 JS-jquery Ajax 代码,它会更有效地理解你的问题。别担心!试试我下面的说明...
1) 获取表单值并传递给表单
<script type="text/javascript">
$(document).ready(function()
var dataString = $("#FormId").serialize();
var url="ControllerName/MethodName"
$.ajax(
type:"POST",
url:"<?php echo base_url() ?>"+url,
data:dataString,
success:function (data)
alert(data);
);
)
</script>
控制器:
在构造中加载库 form_validation ...
$this->load->library('form_validation');
$this->load->helper('form');
现在把你的控制器写成 ...
function MethodName
$this->form_validation->set_error_delimiters('', '');
$this->form_validation->set_rules('fname','First Name', 'required');
$this->form_validation->set_rules('lname','Last Name', 'required');
$this->form_validation->set_rules('email','Email Address','required|valid_email|is_unique[sec_users.email]');
if ($this->form_validation->run() == FALSE)
echo validation_errors();
else
// To who are you wanting with input value such to insert as
$data['frist_name']=$this->input->post('fname');
$data['last_name']=$this->input->post('lname');
$data['user_name']=$this->input->post('email');
// Then pass $data to Modal to insert bla bla!!
希望在我的应用程序中发挥作用。
如果是最佳答案,请采纳。
谢谢!
【讨论】:
谢谢@Amra Kojon :) 我更新了这个问题。请看。 @user1767712 请您提供您的 html 和型号代码,这将有助于我提供准确的解决方案。谢谢! @meph,我也遇到了同样的问题,请问您是如何在视图页面上显示错误消息的?因为目前,错误消息正在响应中显示。【参考方案2】:我知道您的问题已经存在一年了,但您可以将其用于最新的带有 codeigniter 的引导程序
<?php
class Yourcontroller extends CI_Controller
public function __construct()
parent::__construct();
$this->load->library('form_validation');
public function index()
$this->load->view('template/register');
public function validate()
$json = array();
$this->form_validation->set_rules('username', 'Username', 'required');
$this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');
$this->form_validation->set_rules('password', 'Password', 'required|min_length[5]');
$this->form_validation->set_rules('confirm_password', 'Confirm Password', 'required|matches[password]');
$this->form_validation->set_rules('code', 'Login Code', 'required|numeric|min_length[4]||max_length[8]');
$this->form_validation->set_message('required', 'You missed the input field!');
if (!$this->form_validation->run())
$json = array(
'username' => form_error('username', '<p class="mt-3 text-danger">', '</p>'),
'email' => form_error('email', '<p class="mt-3 text-danger">', '</p>'),
'password' => form_error('password', '<p class="mt-3 text-danger">', '</p>'),
'confirm_password' => form_error('confirm_password', '<p class="mt-3 text-danger">', '</p>'),
'code' => form_error('code', '<p class="mt-3 text-danger">', '</p>')
);
$this->output
->set_content_type('application/json')
->set_output(json_encode($json));
Ajax 脚本
<script type="text/javascript">
$( document ).ready(function()
$('#error').html(" ");
$('#form-submit-button').on('click', function (e)
e.preventDefault();
$.ajax(
type: "POST",
url: "<?php echo site_url('yourcontroller/validate');?>",
data: $("#form").serialize(),
dataType: "json",
success: function(data)
$.each(data, function(key, value)
$('#input-' + key).addClass('is-invalid');
$('#input-' + key).parents('.form-group').find('#error').html(value);
);
);
);
$('#form input').on('keyup', function ()
$(this).removeClass('is-invalid').addClass('is-valid');
$(this).parents('.form-group').find('#error').html(" ");
);
);
</script>
完整查看代码
<div class="container">
<div class="row">
<div class="col-sm-6 ml-auto mr-auto m-auto">
<div class="card mt-5">
<h5 class="card-header"></h5>
<div class="card-body">
<?php echo form_open('agent/register', array('id' => 'form', 'role' => 'form'));?>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<?php echo form_input('username', '', array('class' => 'form-control', 'placeholder' => 'Enter Agent Username', 'id' => 'input-username'));?>
<div id="error"></div>
</div>
<hr/>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<?php echo form_input('email', '', array('class' => 'form-control', 'placeholder' => 'Enter Agent Email', 'id' => 'input-email'));?>
<div id="error"></div>
</div>
<hr/>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<?php echo form_password('password', '', array('class' => 'form-control', 'placeholder' => 'Enter Password', 'id' => 'input-password'));?>
<div id="error"></div>
</div>
<hr/>
</div>
<div class="col-sm-6">
<div class="form-group">
<?php echo form_password('confirm_password', '', array('class' => 'form-control', 'placeholder' => 'Enter Confirm Password', 'id' => 'input-confirm_password'));?>
<div id="error"></div>
</div>
<hr/>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<button type="button" class="btn btn-block btn-dark" id="form-submit-button">Register Agent</button>
</div>
</div>
</div>
<?php echo form_close();?>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function()
$('#error').html(" ");
$('#form-submit-button').on('click', function (e)
e.preventDefault();
$.ajax(
type: "POST",
url: "<?php echo site_url('yourcontroller/validate');?>",
data: $("#form").serialize(),
dataType: "json",
success: function(data)
$.each(data, function(key, value)
$('#input-' + key).addClass('is-invalid');
$('#input-' + key).parents('.form-group').find('#error').html(value);
);
);
);
$('#agent-register-form input').on('keyup', function ()
$(this).removeClass('is-invalid').addClass('is-valid');
$(this).parents('.form-group').find('#error').html(" ");
);
);
</script>
【讨论】:
这比公认的答案更清晰完整【参考方案3】:如果您知道使用 ajax 传递数据,那么工作流程如下。
1) 通过 ajax 将表单数据发送到您的控制器。
2) 立即进行表单验证。
3) 如果成功则“回显”值为 1
4) 如果失败,回显值 0
这样使用echo中的值,就可以判断验证是否失败。如果你需要,我可以给你一个例子
示例 ajax 代码
$('#form').on('submit', function(e)
e.preventDefault();
var data = $(this).serialize();
$.ajax(
url: 'your url',
type: 'POST',
data: data,
success: function(data)
if(data == 1)
$('#form')[0].reset();
alret('success');
else if(data == 0)
alret('failed');
,
error: function()
alert('error');
);
);
【讨论】:
【参考方案4】:Create MY_Form_validation in libraries folder
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Form_validation extends CI_Form_validation
private $json = array();
private $opts = array();
function get_json($extra_array = array(),$error_array=array())
if(count($extra_array))
foreach($extra_array as $addition_key=>$addition_value)
$this->json[$addition_key] = $addition_value;
$this->json['options'] = $this->opts;
if(!empty($error_array))
foreach($error_array AS $key => $row)
$error[] = array('field' => $key, 'error' => $row);
foreach($this->_error_array AS $key => $row)
$error[] = array('field' => $key, 'error' => $row);
if(isset($error))
$this->json['status'] = 'error';
$this->json['errorfields'] = $error;
else
$this->json['status'] = 'success';
return json_encode($this->json);
Call this function in controller if validation failed:
echo $this->form_validation->get_json();
You get the response with form fieldname and errormessage
Example:
"options":[],"status":"error","errorfields":["field":"email","error":"The Mobile Number\/Email\/Username field is required.","field":"password","error":"The Password field is required."]
【讨论】:
如果可能的话,你能提供一个完整的例子吗?【参考方案5】:试试这是我的工作(Codeigniter 3.0)基本示例来实现你想做的事情
在您的视图中包含 filename.js
document.getElementById("yourForm").reset();
$(document).ready( function()
var yourForm = $('#yourForm');
yourForm.submit( function(event)
event.preventDefault();
$.ajax(
type: 'POST',
url: yourForm.attr( 'action' ),
data: yourForm.serialize(),
success: function(data)
if (data.code == '200')
$('#message').html(data.message);
document.getElementById("yourForm").reset();
,
error: function(data)
var response = data.responseText;
var obj = jQuery.parseJSON(response);
if (obj.code == '500')
var i;
for (i = 0; i < obj.field.length; i++)
name = obj.field[i];
$('.label-'+name).addClass('label-error');
errors = JSON.stringify(obj.validation);
validate = jQuery.parseJSON(errors);
$('.helper-'+name).html(validate[name]);
);
);
);
查看 HTML 表单示例 在这个使用 className 的示例中,您可以使用 id 以及相应地更改 filename.js 文件
<form id="yourForm" action="base_url/controller/function_name" action="POST">
// Important text after className "label-" & "helper-" must be input name
<label class="label-firstName">Name</label>
<input type="text" name="firstName" />
<span class="helper-firstName"></span>
</form>
<div id="message"></div>
控制器 PHP 代码
public function function_name()
if(!empty($_POST))
$this->load->library('form_validation');
$this->form_validation->set_rules('firstName','First Name','required|max_length[16]');
if($this->form_validation->run())
$params = array(
'firstName' => $this->input->post('firstName'),
);
// Model returning $data['newRecord'] with $params and insertId
$data['newRecord'] = $this->Record_model->newRecord($params);
$reply = array();
$reply['code'] = 200;
$reply['record'] = array(
'insertId' => $data['newRecord']['insertId'],
'firstName' => $data['newRecord']['firstName']
);
$reply['message'] = 'Hello, ' .$data['newRecord']['firstName']. ' - We have received your message. ' .$data['newRecord']['insertId']. ' is your reference ID, for this communication.';
header('Content-Type: application/json; charset=UTF-8');
print json_encode($reply);
else
$validation = $this->form_validation->error_array();
$field = array();
foreach($validation as $key => $value)
array_push($field,$key);
$reply = array(
'code' => 500,
'field' => $field,
'validation' => $validation,
'message' => 'Submission failed due to validation error.'
);
header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Problem', true, 500);
header('Content-Type: application/json; charset=UTF-8');
print json_encode($reply);
else
$reply = array();
$reply['code'] = 403;
$reply['message'] = 'No Direct Access Allowed.';
header($_SERVER['SERVER_PROTOCOL'] . ' 403 Forbidden', true, 403);
header('Content-Type: application/json; charset=UTF-8');
print json_encode($reply);
【讨论】:
【参考方案6】:如果使用 ajax,...你不能使用 form_validation 库 因此,您可以使用 jquery 在客户端进行验证...而在服务器端应该使用 if 语句来检查提交的数据
【讨论】:
不,这不是真的。您可以使用或不使用 ajax 来使用 form_validation 库。以上是关于在 codeigniter 中使用 jquery ajax 进行表单验证的主要内容,如果未能解决你的问题,请参考以下文章
在 codeigniter 中使用 jquery ajax 进行表单验证
使用 codeigniter 和 jquery 进行 AJAX 分页
无法在 Codeigniter 中使用 jquery 设置正确的图像路径
在codeigniter中使用jquery的日期选择器不起作用