FORM VALIDATION IN CODEIGNITOR

1. Create database employee using CREATE DATABASE employee

CREATE DATABASE employee;

2.create table users using CREATE TABLE SQL statement

CREATE TABLE IF NOT EXISTS `users` (

`userid` int(4) NOT NULL AUTO_INCREMENT,

`firstname` varchar(50) NOT NULL,

`lastname` varchar(50) NOT NULL,

`email` varchar(50) NOT NULL,

`password` varchar(40) NOT NULL,

PRIMARY KEY (`userid`)

);

3. create a controller form.php in controller in CodeIgnitor

filename: form.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Form extends CI_Controller{

function __construct() {

parent::__construct();

}

public function index()

{

$this->load->view('form_view');

}

public function signup()

{

if( $this->input->post('signup')) {

$this->load->helper(array('form', 'url'));

$this->load->library(' form_validation');

$this->form_validation-> set_message('is_unique','The email already exits.');

$this->form_validation->set_rules('firstname','Firstname', 'trim|required|min_length[5]|max_length[12]');

$this->form_validation->set_rules('lastname','Lastname', 'trim|required|min_length[5]|max_length[12]');

$this->form_validation->set_rules('email','Email', 'required|valid_email|is_unique[users.email]');

$this->form_validation->set_rules('password', 'Password','required|matches[passwordconf]');

$this->form_validation->set_rules('passwordconf','Password Confirmation', 'required');

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

{

$this->load->view('form_view');

}

else

{

$this->load->view('successmsg');

}

else

{

$this->load->view('form_view');

}

4. Create a SIGN IN form.

The SIGN IN form contains a firstname , lastname, email, password, password confirmation as user input fields.

create a form_view.php in views in CodeIgnitor.

filename: form_view.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv= "X-UA-Compatible" content="IE=edge">
<meta name= "viewport" content= "width=device-width, initial-scale=1">
<title>Sign in Form </title>

<link href="<?php echo base_url ('assets/ css/bootstrap.min.css');?>" rel= "stylesheet">




<link rel= "stylesheet" href="<?php echo base_url('assets/css/style.css');?>">
</head>

<h3>SIGNUP Form</h3>

</div>

<?php echo validation_errors(); ?>

<?php if(isset($message))

{

echo $message;

}?>

<label for="firstname" class="col-sm-4 control-label">First Name : </label>

<input type="text" class="form-control" id="firstname" value="<?php echo set_value('firstname'); ?>" name="firstname" placeholder="First Name">

</div>

<input type="text" class="form-control" id="lastname" value="<?php echo set_value('lastname'); ?>" name="lastname" placeholder="last Name">

</div>

<label for="username" class="col-sm-4 control-label">Email: </label>

<input type="text" class="form-control" id="username" value="<?php echo set_value('email');?>"name="email" placeholder="email">

</div>

<label for="password" class="col-sm-4 control-label">Password: </label>

<input type="password" class="form-control" id="password" value="<?php echo set_value('password'); ?>"name="password" placeholder="Password">

</div>

<label for="passwordconf" class="col-sm-4 control-label">Password Confirm: </label>

<input type= "password" class="form-control" id="passwordconf" value="<?php echo set_value('passwordconf');?>" name="passwordconf" placeholder="Re-enter your password">

</div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

</div>

</form>

</div>

&COPY; ABC COMPANY 2015

</div>

</body>

</html>

Now,start local server and MYSQL using XAMPP or WAMP

Then type http://localhost/appName/form/ in your browser

This form is not submitted till all the field are correctly filled.
To successfully submit the form, it requires:

minimum 5 length first and last name.
a unique email address in email input field.
the input password field values must match with password confirmation field

If the user input value to the field input is not correct. then it displays the message.

4. create a view page 'successmsg.php' to view the success message in views in CodeIgnitor.

filename:successmsg.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Sign up Form</title>

<link href="<?php echo base_url('assets/css/bootstrap.min.css');?>" rel="stylesheet">

<body>
<div class="col-md-5 col-md-offset-3">
<h3>Your form has been successfully submitted!</h3>

<h2><?php echo anchor('form', 'Try it again!'); ?></h2>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
</body>

</html>
If the form is correctly filled and submitted, it displays the following message:

5. create a style sheet style.css

filename: style.css

a{
text-decoration: none;
padding: 10px 15px;
}
a:hover{
text-decoration: none;
background-color: #337AB7;
color: #fff;
border-radius: 4px;
}
.login
{
background-color: lavender;
border-radius: 7px;
margin-top: 2px;
padding: 10px 15px;

}

.main_title
{
height: 70px;
background-color: #337AB7;
text-transform:uppercase;
font-style:normal;
text-align:center;
font-family: "Augustus-Black",Georgia,"Nimbus Sans L",sans-serif;

color: #fff;
padding-top: 4px;
border-radius: 7px;
margin-top: 2px;
margin-bottom: 15px;

}
.sign_up
{
color: #337AB7;
text-transform:uppercase;
font-style:normal;
text-align:right;
margin-bottom:10px;
}

.footer
{
text-align: center;
background-color: #337AB7;
color: #fff;
padding-bottom: 10px;
padding-top: 10px;
border-radius: 7px;
font-size: 15px;
}

We keep on updating such tutorials.

For more such tutorials like our Facebook page.

Web Programming Tutorials

Reference https://ellislab.com/codeigniter/user-guide/database/active_record.html

Search This Blog

Web Programming Tutorials