Blog Details

JQUERY Through Validation


                                
                                    <h2>* <strong>How to put Validation Using Jquery ?</strong></h2>
<ul>
	<li>showing how to integrate Codeigniter form validation library and jQuery Ajax.</li>
	<li>We are using Codeigniter Form Validation class to validate the input fields.</li>
	<li>If the error exists, form values will not be saved and will display proper validation errors.</li>
	<li>jQuery and Ajax is used to avoid a full <strong>page refresh</strong> resulted from a form validation. You can find complete <strong>source code</strong> ready to be used below. I have used the form directly from CodeIgniter Form Validation Example.<a href="http://ellislab.com/codeigniter/user-guide/libraries/form_validation.html">
</a></li>
</ul>
&nbsp;
<h4><strong>1)</strong>  First, we make controller, create a file name "pages.php"   Create a file    at <strong><dfn>application/controllers/main.php</dfn></strong> with the following code.</h4>
&lt;?php
class News extends CI_Controller {

<strong>public function __construct()</strong>
{

parent::__construct();
$this-&gt;load-&gt;helper('url');
$this-&gt;load-&gt;library('session');
$this-&gt;load-&gt;model('news_model');
}

<strong>public function email()</strong>
{
$this-&gt;load-&gt;helper('form');
$this-&gt;load-&gt;library('form_validation');

$this-&gt;load-&gt;view('news/email');

}

<strong>public function process()</strong>
{
$this-&gt;load-&gt;library('email');

$this-&gt;email-&gt;from($this-&gt;input-&gt;post('email'), $this-&gt;input-&gt;post('name'));
$this-&gt;email-&gt;to('abc@gmail.com');
$this-&gt;email-&gt;subject($this-&gt;input-&gt;post('subject'));
$this-&gt;email-&gt;message($this-&gt;input-&gt;post('message'));

if($this-&gt;email-&gt;send())
{
echo "We have successfully received your email.";
}
else
{
echo "Some problem occurred.";
}
}

&nbsp;
<h4><strong>2) </strong>Create the form at <strong><dfn>application/views/email.php</dfn></strong> and add the following code.</h4>
<strong>&lt;style type="text/css"&gt;</strong>
label.valid {
width: 24px;
height: 24px;
background: url(../img/valid.png) center center no-repeat;
display: inline-block;
text-indent: -9999px;
}
label.error {
font-weight: bold;
padding: 2px 8px;
margin-top: 2px;
}
<strong>&lt;/style&gt;</strong>

<strong>&lt;head&gt;</strong>
&lt;script type="text/javascript"                                                                                                                                         src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"                                                                                                                                        src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"&gt;                     &lt;/script&gt;

<strong>&lt;/head&gt;</strong>

<strong>&lt;body&gt;</strong>

&lt;div&gt;
&lt;div&gt;
&lt;div&gt;
<strong>&lt;form action="" id="contact-form" method="post"&gt;</strong>
&lt;fieldset&gt;
&lt;div&gt;
&lt;label for="name"&gt;Your Name&lt;/label&gt;
&lt;div&gt;
&lt;input type="text" name="name" id="name"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="email"&gt;Email Address&lt;/label&gt;
&lt;div&gt;
&lt;input type="text" name="email" id="email"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="subject"&gt;Subject&lt;/label&gt;
&lt;div&gt;
&lt;input type="text" name="subject" id="subject"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="message"&gt;Your Message&lt;/label&gt;
&lt;div&gt;
&lt;textarea name="message" id="message" rows="3"&gt;                                      &lt;/textarea&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
&lt;label for="subject"&gt;Password&lt;/label&gt;
&lt;div&gt;
&lt;input type="text" name="pass" id="pass"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="subject"&gt;Confirm Password&lt;/label&gt;
&lt;div&gt;
&lt;input type="text" name="cpass" id="cpass"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;button type="submit"&gt;Send Email&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/fieldset&gt;
<strong>&lt;/form&gt;</strong>
&lt;!-- output the results (Success or failure message from controller) --&gt;
&lt;div id="results"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;

//  using jquery through validation
<strong>$(document).ready(function() {</strong>

// userdefine validation function

<strong>$.validator.addMethod("passwordCheck",function (value,element){</strong>
return value==$("#cpass").val();

}, 'Password and Confirm Password should be same');

// userdefine validation function

<strong>jQuery.validator.addMethod("check", function(value, element) {</strong>
if(/[a-z]+$/.test(value))
return true;
return false;
this.optional(element) || /^[a-z,]+$/i.test(value);
}, "enter alphabetic character valuee");

<strong>$('#contact-form').validate({</strong>
<strong>rules:{</strong>
name:{ minlength: 2,check:true, required: true },
email:{ required: true, email: true},
subject:{ minlength: 2, required: true },
message:{ minlength: 2, required: true },
pass:{ minlength: 2,passwordCheck: true,required: true },
cpass:{ minlength: 2,required: true}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},

<strong>success:</strong> function(element) {
element.text('OK!').addClass('valid').closest('.control-                                                                                   group').removeClass('error').addClass('success');
},

<strong>submitHandler: function( form ) {</strong>

$.ajax({
url : ' &lt;?php echo base_url() ?&gt;<strong>/index.php/news/process',</strong>
data : $('#contact-form').serialize(),
type: "POST",
success : function(data){
$("#contact-form").hide('slow');
$('#results').html(data);

}

})
return false;
}

});
});

&lt;/script&gt;
<strong>&lt;/body&gt;</strong>
&lt;/html&gt;
                                    


Categories

CodeIgnitor

Latest posts

13.05.14
Implementing CRUD Operations ¶

<ul> <li>Now comes the fun part. We would like t

13.05.14
View

<ol> <li><a href="http://www.yiiframework.com/do

13.05.14
Creating Model

<ol> <li><a href="http://www.yiiframework.com/do

Get Free Quote