[eluser]cideveloper[/eluser]
One thing you should make sure you do is gracefully degrade your form. Make sure it works without JavaScript enabled as well as with. This is just a basic form validation example using CI form validation and Jquery. Take note: I have enclosed the javascript in square brackets cause the forum removes it if you use <>, so you need to replace those.
Controller - welcome.php
Code:
class Welcome extends MY_Controller {
function __construct()
{
//Contructor function
parent::MY_Controller();
}
function index()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email', 'Email', 'required|xss_clean|valid_email');
$this->form_validation->set_rules('password', 'Password', 'required|xss_clean|min_length[6]|max_length[18]');
$this->form_validation->set_rules('confirm_password', 'Password Confirmation', 'required|xss_clean|min_length[6]|max_length[18]|matches[password]');
$data['title'] = 'get177539';
if ($this->form_validation->run() == FALSE){
if(IS_AJAX) {
$data = array (
'status' => false,
'msg' => validation_errors()
);
echo json_encode($data);
} else {
$this->load->view('welcome_form');
}
} else {
$data = array (
'status' => true,
'msg' => '<h1>Form Submitted</h1>'
);
if(IS_AJAX) {
echo json_encode($data);
} else {
$this->load->view('welcome_formsuccess', $data);
}
}
}
}
Form View - welcome_form.php
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CI and JQuery Form Validation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<form id="val_form" action="<?=site_url('welcome')?>" method="post">
<p><label for="email">Email:</label><input type="text" name="email" id="email" value="<?php echo set_value('email'); ?>" /></p>
<p><label for="password">Password:</label><input type="password" name="password" id="password" value="<?php echo set_value('password'); ?>" /></p>
<p><label for="confirm_password">Confirm Password:</label><input type="password" name="confirm_password" id="confirm_password" value="<?php echo set_value('password'); ?>" /></p>
<p><input type="submit" value="Submit" class="button" /></p>
</form>
<p id="val_form_errors">
<?php echo validation_errors(); ?>
</p>
</div>
[script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"][/script]
[script type="text/javascript" src="<?=base_url()?>assets/js/site.js"][/script]
</body>
</html>
Success View - welcome_formsuccess.php
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CI and JQuery Form Validation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<?=$msg;?>
</div>
[script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"][/script]
[script type="text/javascript" src="<?=base_url()?>assets/js/site.js"][/script]
</body>
</html>
JQuery - site.js
Code:
$(function(){
$('#val_form').submit(function(e){
$('#val_form_errors').hide();
e.preventDefault();
$.post($(this).attr('action'),$(this).serialize(),function(data){
//console.log(data);
if (data.status){
$('#val_form_errors').html(data.msg).fadeIn('slow').css({'color':'green', 'border':'1px solid green', 'padding':'20px', 'display': 'inline-block'});
} else {
$('#val_form_errors').html(data.msg).fadeIn('slow').css({'color':'red', 'border':'1px solid #FF3333', 'padding':'20px', 'display': 'inline-block'});
}
}, 'json');
});
});
