title: Codeigniter and jQuery - Validate form data
body: <p>I do lots of my own coding with Codeigniter+jQuery combo. My current project has lot's of different kind of inputs, and when data is different, I have to handle it differently. One field can be email field, one field can be number field that has to allow only numbers and comma etc. You got the point.</p>
  
  <p>I made really easy example how I have been doing things. So when submit is pressed I check every input's data with regex match and if something is wrong, then it will change color of that input, and inform on some field that whats wrong. Quite simple.</p>
  
  <p>This method works, but when I have lots of inputs it gets really messy and hard to maintain, and what I mean by that is that I have to have PHP fallback if user have disabled javascript. So I have same checks on jQuery and PHP side. </p>
  
  <p>Other thing is security. I think that I'm almost too paranoid about exploits/XSS attacks, and I often remove all unwanted characters with regex and after that i check with other regex that if that remaining data is valid. </p>
  
  <p>I would be grateful if somebody could tell if there is better way to achieve this data handling/validating between Codeigniter and jQuery. </p>
  
  <p><strong>application/controllers/example.php</strong></p>
  
  <pre><code>&lt;?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
  
  class Example extends CI_Controller {
  
    function __construct()
    {
      parent::__construct();
  
      $this-&gt;load-&gt;helper('url');
    }
  
    public function index()
    {
      $this-&gt;load-&gt;view('example_view');
    }
  
    public function jquery()
    {
      echo "Username: ". $this-&gt;input-&gt;post('userName');
      echo "userAge: ". $this-&gt;input-&gt;post('userAge');
      echo "userEmail: ". $this-&gt;input-&gt;post('userEmail');
    }
  }
  ?&gt;
  </code></pre>
  
  <p><strong>application/views/example_view.php</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-us"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;My test&lt;/title&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="status"&gt;&lt;/div&gt; &lt;br /&gt;
  
      &lt;form id="userForm"&gt;
        &lt;label for="userName"&gt;Username:&lt;/label&gt;
        &lt;input type="text" name="userName" id="userName" /&gt; &lt;br /&gt;
  
        &lt;br /&gt;
  
        &lt;label for="userAge"&gt;Age:&lt;/label&gt;
        &lt;input type="text" name="userAge" id="userAge" /&gt; &lt;/br &gt;
  
        &lt;br /&gt;
  
        &lt;label for="userEmail"&gt;E-Mail:&lt;/label&gt;
        &lt;input type="text" name="userEmail" id="userEmail" /&gt; &lt;/br &gt;
  
        &lt;/br &gt;
  
        &lt;input type="submit" name="sendData" value="Send it" /&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  
  &lt;script&gt;
  $("#userForm").submit(function(event) {
  
      event.preventDefault();
  
      var error = 0;
  
      if($("#userForm").match('/regexp_here/'))
      {
        $("#userName").addClass('alert');
        error++;
      }
      else
      {
        $("#userName").removeClass('alert');
      }
  
      if($("#userAge").match('/regexp_here/'))
      {
        $("#userAge").addClass('alert');
        error++;
      }
      else
      {
        $("#userAge").removeClass('alert');
      }
  
      if($("#userEmail").match('/regexp_here/'))
      {
        $("#userEmail").addClass('alert');
        error++;
      }
      else
      {
        $("#userEmail").removeClass('alert');
      }
  
      if(error == 0)
      {
        $.ajax({
          type: 'POST',
          url: 'example/jquery/',
          data: { 
            userName: userName, 
            userAge: userAge, 
            userEmail: userEmail
          },
          success:function(data) 
          {
            $("status").html(data);
          },
          error:function() 
          {
            $("status").html("Well, it was error...");
          }
        });
      }
      else { }
  });
  &lt;/script&gt;
  </code></pre>