Blog Details

JQUERY Through Validation


How to put Validation Using Jquery ?

  • showing how to integrate Codeigniter form validation library and jQuery Ajax.
  • We are using Codeigniter Form Validation class to validate the input fields.
  • If the error exists, form values will not be saved and will display proper validation errors.
  • jQuery and Ajax is used to avoid a full page refresh resulted from a form validation. You can find complete source code ready to be used below. I have used the form directly from CodeIgniter Form Validation Example.

1)  First, we make controller, create a file name "pages.php"   Create a file    at application/controllers/main.php with the following code.

<?php class News extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url'); $this->load->library('session'); $this->load->model('news_model'); } public function email() { $this->load->helper('form'); $this->load->library('form_validation'); $this->load->view('news/email'); } public function process() { $this->load->library('email'); $this->email->from($this->input->post('email'), $this->input->post('name')); $this->email->to(''); $this->email->subject($this->input->post('subject')); $this->email->message($this->input->post('message')); if($this->email->send()) { echo "We have successfully received your email."; } else { echo "Some problem occurred."; } }  

2) Create the form at application/views/email.php and add the following code.

<style type="text/css"> 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; } </style> <head> <script type="text/javascript"                                                                                                                                         src=""></script> <script type="text/javascript"                                                                                                                                        src="">                     </script> </head> <body> <div> <div> <div> <form action="" id="contact-form" method="post"> <fieldset> <div> <label for="name">Your Name</label> <div> <input type="text" name="name" id="name"> </div> </div> <div> <label for="email">Email Address</label> <div> <input type="text" name="email" id="email"> </div> </div> <div> <label for="subject">Subject</label> <div> <input type="text" name="subject" id="subject"> </div> </div> <div> <label for="message">Your Message</label> <div> <textarea name="message" id="message" rows="3">                                      </textarea> </div> </div> <div> <label for="subject">Password</label> <div> <input type="text" name="pass" id="pass"> </div> </div> <div> <label for="subject">Confirm Password</label> <div> <input type="text" name="cpass" id="cpass"> </div> </div> <div> <div> <button type="submit">Send Email</button> </div> </div> </fieldset> </form> <!-- output the results (Success or failure message from controller) --> <div id="results"></div> </div> </div> </div> <script> //  using jquery through validation $(document).ready(function() { // userdefine validation function $.validator.addMethod("passwordCheck",function (value,element){ return value==$("#cpass").val(); }, 'Password and Confirm Password should be same'); // userdefine validation function jQuery.validator.addMethod("check", function(value, element) { if(/[a-z]+$/.test(value)) return true; return false; this.optional(element) || /^[a-z,]+$/i.test(value); }, "enter alphabetic character valuee"); $('#contact-form').validate({ rules:{ 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'); }, success: function(element) { element.text('OK!').addClass('valid').closest('.control-                                                                                   group').removeClass('error').addClass('success'); }, submitHandler: function( form ) { $.ajax({ url : ' <?php echo base_url() ?>/index.php/news/process', data : $('#contact-form').serialize(), type: "POST", success : function(data){ $("#contact-form").hide('slow'); $('#results').html(data); } }) return false; } }); }); </script> </body> </html>



Latest posts

Implementing CRUD Operations ¶

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


<ol> <li><a href="

Creating Model

<ol> <li><a href="

Get Free Quote