Most Popular Tutorials
-
What is Codeigniter
-
Codeigniter Architecture
-
Hierarchical Model View Controller(HMVC)
-
Codeigniter Configuration
-
Remove index.php from url in codeigniter
-
MVC (Models Views Controllers)
-
Controller Class
-
models
-
views
-
Routes
-
Codeigniter URL
-
SEO Friendly URL
-
Codeigniter SLUG
-
_remap() function
-
Remove Controller name from URL
-
URL Segments
-
Basepath, Apppath, FCPATH
-
GET and POST method
-
Page Redirection
-
Helper Class
-
Custom Helper class
-
Form Helper
-
Add active class to menu
-
Custom 404 page
-
Codeigniter Hook
-
Custom Library
-
Inline css in codeigniter
-
PHP Functions
-
Array Functions
-
Set & Get Tempdata
-
Speed Up CodeIgniter App
-
Session
-
Cookie
-
Flash Message and Data
-
Encription and Decription
-
Codeigniter Security
-
CSRF Token Security
-
password hashing
-
Form Validation
-
Custom Validation
-
Server Side Form Validation
-
Registration Form Validation
-
Validate Select Option Field
-
Date Format Form Validation
-
Date format function and Change Date format
-
DOB Validation
-
Hindi Typing in Text Box
-
User Signup
-
User Login
Most Popular Tutorials :-
Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List
Registration Form validation in codeigniter
Registration Form Example
File name : index.php
<html>
<head>
<title>
</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style type="text/css">
.palel-primary
{
border-color: #bce8f1;
}
.panel-primary>.panel-heading
{
background:#bce8f1;
}
.panel-primary>.panel-body
{
background-color: #EDEDED;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$flag=1;
$("#myName").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_name").text("* You have to enter your first name!");
}
else
{
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled',false);
$("#error_name").text("");
}
});
$("#lastname").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_lastname").text("* You have to enter your Last name!");
}
else
{
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled',false);
$("#error_lastname").text("");
}
});
$("#dob").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_dob").text("* You have to enter your Date of Birth!");
}
else
{
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled',false);
$("#error_dob").text("");
}
});
$("#gender").focusout(function(){
$(this).css("border-color", "#2eb82e");
});
$("#age").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_age").text("* You have to enter your Age!");
}
else
{
$(this).css({"border-color":"#2eb82e"});
$('#submit').attr('disabled',false);
$("#error_age").text("");
}
});
$("#phone").focusout(function(){
$pho =$("#phone").val();
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_phone").text("* You have to enter your Phone Number!");
}
else if ($pho.length!=10)
{
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_phone").text("* Lenght of Phone Number Should Be Ten");
}
else if(!$.isNumeric($pho))
{
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_phone").text("* Phone Number Should Be Numeric");
}
else{
$(this).css({"border-color":"#2eb82e"});
$('#submit').attr('disabled',false);
$("#error_phone").text("");
}
});
$( "#submit" ).click(function() {
if($("#myName" ).val()=='')
{
$("#myName").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_name").text("* You have to enter your first name!");
}
if($("#lastname" ).val()=='')
{
$("#lastname").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_lastname").text("* You have to enter your Last name!");
}
if($("#dob" ).val()=='')
{
$("#dob").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_dob").text("* You have to enter your Date of Birth!");
}
if($("#age" ).val()=='')
{
$("#age").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_age").text("* You have to enter your Age!");
}
if($("#phone" ).val()=='')
{
$("#phone").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_phone").text("* You have to enter your Phone Number!");
}
});
});
</script>
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-12 col-lg-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">Enter Your Details Here
</div>
<div class="panel-body">
<form name="myform">
<div class="form-group">
<label for="myName">First Name *</label>
<input id="myName" name="myName" class="form-control" type="text" data-validation="required">
<span id="error_name" class="text-danger"></span>
</div>
<div class="form-group">
<label for="lastname">Last Name *</label>
<input id="lastname" name="lastname" class="form-control" type="text" data-validation="email">
<span id="error_lastname" class="text-danger"></span>
</div>
<div class="form-group">
<label for="age">Age *</label>
<input id="age" name="age" class="form-control" type="number" min="1" >
<span id="error_age" class="text-danger"></span>
</div>
<div class="form-group">
<label for="dob">Date Of Birth *</label>
<input type="date" name="dob" id="dob" class="form-control">
<span id="error_dob" class="text-danger"></span>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender" class="form-control">
<option selected>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<span id="error_gender" class="text-danger"></span>
</div>
<div class="form-group">
<label for="phone">Phone Number *</label>
<input type="text" id="phone" name="phone" class="form-control" >
<span id="error_phone" class="text-danger"></span>
</div>
<div class="form-group">
<label for="disc">Discription</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<button id="submit" type="submit" value="submit" class="btn btn-primary center">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<head>
<title>
</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style type="text/css">
.palel-primary
{
border-color: #bce8f1;
}
.panel-primary>.panel-heading
{
background:#bce8f1;
}
.panel-primary>.panel-body
{
background-color: #EDEDED;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$flag=1;
$("#myName").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_name").text("* You have to enter your first name!");
}
else
{
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled',false);
$("#error_name").text("");
}
});
$("#lastname").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_lastname").text("* You have to enter your Last name!");
}
else
{
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled',false);
$("#error_lastname").text("");
}
});
$("#dob").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_dob").text("* You have to enter your Date of Birth!");
}
else
{
$(this).css("border-color", "#2eb82e");
$('#submit').attr('disabled',false);
$("#error_dob").text("");
}
});
$("#gender").focusout(function(){
$(this).css("border-color", "#2eb82e");
});
$("#age").focusout(function(){
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_age").text("* You have to enter your Age!");
}
else
{
$(this).css({"border-color":"#2eb82e"});
$('#submit').attr('disabled',false);
$("#error_age").text("");
}
});
$("#phone").focusout(function(){
$pho =$("#phone").val();
if($(this).val()==''){
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_phone").text("* You have to enter your Phone Number!");
}
else if ($pho.length!=10)
{
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_phone").text("* Lenght of Phone Number Should Be Ten");
}
else if(!$.isNumeric($pho))
{
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_phone").text("* Phone Number Should Be Numeric");
}
else{
$(this).css({"border-color":"#2eb82e"});
$('#submit').attr('disabled',false);
$("#error_phone").text("");
}
});
$( "#submit" ).click(function() {
if($("#myName" ).val()=='')
{
$("#myName").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_name").text("* You have to enter your first name!");
}
if($("#lastname" ).val()=='')
{
$("#lastname").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_lastname").text("* You have to enter your Last name!");
}
if($("#dob" ).val()=='')
{
$("#dob").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_dob").text("* You have to enter your Date of Birth!");
}
if($("#age" ).val()=='')
{
$("#age").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_age").text("* You have to enter your Age!");
}
if($("#phone" ).val()=='')
{
$("#phone").css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_phone").text("* You have to enter your Phone Number!");
}
});
});
</script>
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-12 col-lg-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">Enter Your Details Here
</div>
<div class="panel-body">
<form name="myform">
<div class="form-group">
<label for="myName">First Name *</label>
<input id="myName" name="myName" class="form-control" type="text" data-validation="required">
<span id="error_name" class="text-danger"></span>
</div>
<div class="form-group">
<label for="lastname">Last Name *</label>
<input id="lastname" name="lastname" class="form-control" type="text" data-validation="email">
<span id="error_lastname" class="text-danger"></span>
</div>
<div class="form-group">
<label for="age">Age *</label>
<input id="age" name="age" class="form-control" type="number" min="1" >
<span id="error_age" class="text-danger"></span>
</div>
<div class="form-group">
<label for="dob">Date Of Birth *</label>
<input type="date" name="dob" id="dob" class="form-control">
<span id="error_dob" class="text-danger"></span>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender" class="form-control">
<option selected>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<span id="error_gender" class="text-danger"></span>
</div>
<div class="form-group">
<label for="phone">Phone Number *</label>
<input type="text" id="phone" name="phone" class="form-control" >
<span id="error_phone" class="text-danger"></span>
</div>
<div class="form-group">
<label for="disc">Discription</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<button id="submit" type="submit" value="submit" class="btn btn-primary center">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Demo
File name : index.php
Demo 2
File name : index.php
Demo 3
File name : index.php
Previous Next
Trending Tutorials
Review & Rating
0.0 / 5
0 Review
5
(0)
4
(0)
3
(0)
2
(0)
1
(0)
Write Review Here
Most Popular Tutorials
-
Inline css in codeigniter
-
password hashing
-
views
-
CSRF Token Security
-
Codeigniter Architecture
-
Remove index.php from url in codeigniter
-
Codeigniter Security
-
Set & Get Tempdata
-
Hierarchical Model View Controller(HMVC)
-
Form Helper
-
PHP Functions
-
Add active class to menu
-
models
-
Validate Select Option Field
-
SEO Friendly URL
-
Flash Message and Data
-
Routes
-
Controller Class
-
Helper Class
-
GET and POST method
Important Link
-
How to manage Session in php Tutorials.
More ....... -
upcomming codeigniter and angular js tutorials.
Click here to see More ...
