Validar un formulario con Jquery en CodeIgniter

Este es el Tema 6.1 de la creación de un carrito de compras con CodeIgniter; hoy vamos a ver cómo validar un formulario con Jquery; vamos a utilizar la misma vista que usamos para validar los datos en el servidor; haremos esto utilizando el evento blur de Jquery, el cual nos va a permitir hacer las validaciones después de que cada campo del formulario haya perdido el foco. El tema de hoy y todos los demás se pueden descargar al final de cada post, y para este post también se puede descargar la plantilla en html en la que se hacen las mismas validaciones Jquey.

 Paso 1

vamos a cart/assets/ y creamos un directorio llamado js, dentro de el descargamos la librería Jquery o colocamos alguna que ya hayamos descargado, para este ejemplo voy utilizar la versión jquery-1.9.1.js; o podemos usar una de las ultimas versiones de google.apis

continuo con la explicación suponiendo que cada quien van a descargar la versión de Jquery. Después creamos en la misma carpeta un archivo Jquery con el nombre de functions.js; aquí es donde vamos a validar que los campos no estén vacíos o que sean correctos.

$(document).ready(function(){
  
 $('#name').blur(function(){
            
    var name = $(this).val();          
  
      if(name==''){
        
        $('#name').addClass('error_jquery');
          $('#msg_name').html('El campo Nombre es requerido');
      }else{
        
          $('#name').removeClass('error_jquery');
          $('#msg_name').html('');
      }
        
  });
          
 $('#phone').blur(function(){
            
    var phone = $(this).val();    // colocamos el contenido del (div phone) en la variable phone      

    if(phone==''){
          $('#phone').addClass('error_jquery'); // añadimos una clase al div phone
          $('#msg_phone').html('El campo Teléfono es requerido'); // añadimos el mensaje
     }else if(isNaN(phone)){ // evalua si es númerico
                
          $('#msg_phone').html(''); // dejamos en blanco el div para colocar el otro mensaje
          $('#msg_phone').html('El Teléfono debe ser númerico');       
        
      }else{
              // si no hay errores removemos la clase error_jquery y dejamos el div vacio
          $('#phone').removeClass('error_jquery');
          $('#msg_phone').html('');
        
      }
  });  

 $('#address').blur(function(){
            
    var address = $(this).val();          
  
      if(address==''){
        
        $('#address').addClass('error_jquery');
          $('#msg_address').html('El campo Ciudad y dirección es requerido');
      }else{
        
          $('#address').removeClass('error_jquery');
          $('#msg_address').html('');
      }
        
 });
    
// Método que verifica si el email es válido    
function ValidEmail(email) {
         var verify = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
         return verify.test(email);
    }    

        
 $('#email').blur(function(){
      
    var email = $(this).val();  
  
 if(email==''){
      
        $('#email').addClass('error_jquery');
          $('#msg_email').html('El campo Email es requerido');
      
     }else{
      
        if(ValidEmail(email)){
       
         $('#email').removeClass('error_jquery');
          $('#msg_email').html('');
       
     }else{
       
        $('#email').addClass('error_jquery');
          $('#msg_email').html('El Email no es válido');
     }
      
    }
    
 });  
             
});

Paso 2

abrimos header.php para hacer referencia a los archivos js, aquí debemos tener en cuenta que al primero que debemos referenciar es la librería Jquery, para que el archivo functions.js funcione; después de la linea en que cargamos el CSS añadimos los archivos Js. Colocamos estas 2 lineas el hader

<script type="text/javascript" src="<?=base_url();?>assets/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?=base_url();?>assets/js/functions.js"></script>

 Paso 3

vamos a cart/applications/views/ y abrimos checkout.php, y añadimos los divs en los que van a aparecer los mensajes de error. Reemplazamos los campos del anterior formulario por estos.

      <div><?=form_label('Nombre');?></div>
      <div id='msg_name'></div>               
      <div><?=form_input($name);?></div>
      <div><?=form_label('Celular');?></div>
      <div id='msg_phone'></div>
      <div><?=form_input($phone);?></div>
      <div><?=form_label('Ciudad y direccción');?></div>
      <div id='msg_address'></div>
      <div><?=form_input($address);?></div>
      <div><?=form_label('Email');?></div>
      <div id='msg_email'></div>  
      <div><?=form_input($email);?></div>

 Último paso añadir unas lineas a la hoja de estilos

.error_jquery{
        border: 2px solid #bf0100;   
        }
#msg_name, #msg_phone, #msg_address, #msg_email{
    color: red;   
}

 De esta forma ya se están validando los campos con Jquery, para el siguiente tema vamos a hacer el formulario de login con validaciones Ajax.

Descargar pedido con Jquery 
Descargar formulario con Jquery