Saltar al contenido

Validación de formulario CodeIgniter con formulario de muestra de adición

Formulario en CodeIgniter

Los formularios proporcionan una forma para que los usuarios interactúen con la aplicación e ingresen datos. Se puede utilizar para un formulario de contacto con nosotros que un visitante del sitio web puede completar y enviarnos la información. La información recibida generalmente se almacena en la base de datos o se envía por correo electrónico.

En este tutorial, aprenderá:

Estructura de formulario HTML

El siguiente código muestra la estructura de un formulario HTML normal.


<form id="frmUsers" name="frmUsers" method="POST" action="create_user.php">
	<input type="text" id="user_id" name="user_id">
	<input type="password" id="password" name="password">

	<input type="submit" value="Submit">
</form>

AQUÍ,

Asistente de formulario CodeIgniter

HTML es increíblemente fácil de entender y escribir, aunque CodeIgniter simplifica aún más las cosas. CodeIgniter tiene funciones integradas para crear formularios HTML.

Consideremos el siguiente formulario de inserción de código formIgniter que el asistente de formulario usa para crear un formulario


 <?php
        echo form_open('create_user.php', ['id' => 'frmUsers']);
        
        echo form_label('User Id', 'user_id');
        echo form_input(['name' => 'user_id']);
        
        echo form_label('Password', 'password');
        echo form_input(['type' => 'password', 'name' => 'password']);
        
        echo form_submit('btnSubmit', 'Create User');
        
        echo form_close();
        ?>

AQUÍ,

  • macalla form_open (‘crear_usuario.php’, [‘id’ => ‘frmUsers’]); crea la etiqueta de inicio del formulario, establece la acción en POST Verb y establece la URL de acción en create_user.php
  • echo form_label (‘Id. de usuario’, ‘id_usuario’); se crea una etiqueta que dice User Id para el campo de entrada con el nombre user_id.
  • macalla form_input ([‘name’ => ‘user_id’]); se crea un campo de entrada de tipo de texto con el nombre user_id
  • echo form_submit (‘btnSubmit’, ‘Crear usuario’); se crea un botón para agregar con la etiqueta Crear usuario
  • macalla form_close (); El formulario se cierra

Como puede ver en el código CodeIgniter anterior, los asistentes de formulario nos facilitan la creación de formularios utilizando PHP puro. Al pasar atributos a los métodos del asistente de formulario, podemos personalizar el HTML generado para el formulario.

El código anterior genera el siguiente código de formulario HTML


        <form action="http://localhost:3000/index.php/create_user.php" id="frmUsers" method="post" accept-charset="utf-8">
            <label for="user_id">User Id</label>
            <input type="text" name="user_id" value=""/>

            <label for="password">Password</label>
            <input type="password" name="password" value=""/>

            <input type="submit" name="btnSubmit" value="Create User"/>
        </form>

Las principales ventajas de utilizar el asistente de formulario son que genera código semánticamente correcto que se adhiere a los estándares HTML establecidos.

Puede consultar la documentación oficial de CodeIgniter para obtener más detalles

https://codeigniter.com/user_guide/helpers/form_helper.html

Ejemplo de formulario CodeIgniter

Después de cubrir los conceptos básicos de CodeIgniter, volvamos a nuestro proyecto tutorial en el que estábamos trabajando durante este tiempo. Serie de tutoriales de CodeIgniter. En resumen, el proyecto del tutorial crea una aplicación de administración de contactos que almacenará los datos en la base de datos.

Crear un contacto

en el tutorial anterior, creamos canales para nuestras aplicaciones y escenas simples. Abrir aplicación / comentarios / contactos / create.php

Cambie el código de create.php de la siguiente manera


<div class="column">
    <h2 class="title">Create Contact</h2>
    <form action="<?= base_url('contacts/store') ?>" method="POST">
        <div class="field">
            <label class="label">Contact Name</label>
            <div class="control">
                <input id="name" name="name" class="input" type="text" placeholder="Type the contact name">
            </div>
        </div>
        <div class="field">
            <label class="label">Contact Number</label>
            <div class="control">
                <input id="name" name="name" class="input" type="text" placeholder="Type the contact number">
            </div>
        </div>
        <div class="field">
            <label class="label">Email Address</label>
            <div class="control">
                <input id="email" name="email" class="input" type="email" placeholder="Type the email address">
            </div>
        </div>
        <div class="field is-grouped">
            <div class="control">
                <button class="button is-link">Save Contact</button>
            </div>
        </div>
    </form>
</div>

Nota: el código anterior usa HTML simple para crear formularios.

Ahora veremos cómo se ven nuestros formularios en el navegador web.

Cargue la siguiente URL en nuestro navegador web.

http: // localhost: 3000 / contactos / crear

Si estaba creando el proyecto del tutorial, debería poder ver lo siguiente

Validación de formularios en CodeIgniter

La validación juega un papel muy importante en el procesamiento de datos de formularios. Supongamos que un usuario se está registrando en un sitio web; queremos asegurarnos de que completen los detalles requeridos y la dirección de correo electrónico. Necesitamos asegurarnos de que la dirección de correo electrónico ingresada sea válida. Si estamos trabajando con valores de fecha, queremos asegurarnos de que los rangos de fechas sean válidos. No tendríamos que aceptar una fecha de 32 días al mes, etc.

La validación resuelve los problemas anteriores. La validación de CodeIgniter se realiza en dos (2) lados cuando se trabaja con aplicaciones web.

La validación se realiza en el lado del cliente del lado del navegador web. Esto generalmente involucra HTML y JavaScript. La validación del lado del cliente mejora el rendimiento ya que todo se hace en el lado del cliente. Por tanto, no es necesario enviar los datos al servidor. La desventaja de la validación del lado del cliente es que está controlada por el usuario. Si confía en la validación de JavaScript y el usuario deshabilita JavaScript en el navegador, su validación fallará.

La validación del lado del servidor se realiza en el lado del servidor. La desventaja de esta validación es que el usuario tiene que enviar los datos al servidor para su procesamiento y esperar la respuesta. Esto consume recursos de la red y puede degradar el rendimiento. La principal ventaja de la validación del lado del servidor es que tiene más control y está seguro de que sus reglas de validación funcionan incluso si el usuario deshabilita JavaScript en el navegador.

Una mejor estrategia es utilizar el lado del cliente como la principal estrategia de validación y el lado del servidor como mecanismo de respaldo.

Adición de reglas de validación de formularios

CodeIgniter tiene una biblioteca de validación incorporada. La biblioteca se carga usando la siguiente línea

$this->load->library('form_validation'); 

Se puede usar una biblioteca de validación de formularios CodeIgniter para realizar algunas de las siguientes acciones

Las reglas de validación se establecen utilizando el siguiente formato

$this->form_validation->set_rules('field','human readable field','rule',['custom message']); 

AQUÍ,

El siguiente es un formulario que se inserta en el ejemplo de CodeIgniter para validar el nombre del contacto

$this->form_validation->set_rules('contact_number', 'Contact Number', 'required'); 

AQUÍ,

Para ejecutar la validación contra las reglas establecidas, usamos la siguiente función de la biblioteca de validación

$this->form_validation->run()

Si el código anterior devuelve falso, entonces una o más reglas establecidas fallaron. Si es verdadero, todas las reglas de validación han pasado y puede continuar con otras acciones.

Veamos más ejemplos de reglas de validación. Si necesita validar algunos campos, diga el nombre, el número y la dirección de correo electrónico del contacto, puede usar el siguiente código para lograrlo.


$rules = array(
        array(
                'field' => 'contact_name',
                'label' => 'Contact Name',
                'rules' => 'required'
        ),
        array(
                'field' => 'contact_number',
                'label' => 'Contact Number',
                'rules' => 'required',
                'errors' => array(
                        'required' => 'You must provide a %s.',
                ),
        ),
        array(
                'field' => 'email_address',
                'label' => 'Email Address',
                'rules' => 'required'
        )
);

$this->form_validation->set_rules($rules);

AQUÍ,

Validación única

Si queremos validar el número de contacto para asegurarnos de que no guardamos el mismo número dos veces, podemos usar la siguiente regla para hacerlo.


$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');

AQUÍ,

Mostrar mensajes de error de validación de formularios

Si ocurre un error al procesar el formulario, puede usar el siguiente código para mostrar los errores de validación que ocurrieron

<?php echo validation_errors(); ?> 

AQUÍ,

Detalles de los formularios enviados: formularios fijos

Algunos formularios tienen muchos campos y, si se ha producido un error, desea asegurarse de que se conserven los datos introducidos correctamente. La biblioteca de validación tiene mecanismos para lograr esto. Hacemos esto usando el siguiente código.

<?php echo set_value('field_name'); ?> 

AQUÍ,

Para obtener una guía de referencia completa de los métodos disponibles en la biblioteca de validación, puede consultar la documentación de la API de la guía oficial del usuario de CodeIgniter

https://codeigniter.com/userguide3/libraries/form_validation.html

Ejemplo de validación de formulario CodeIgniter

Durante estos tutoriales, agregamos más código a nuestro proyecto de tutorial, que es una aplicación de gestión de contactos. En esta sección, cargaremos la biblioteca de validación y veremos cómo podemos usarla en la práctica usando una aplicación de muestra en la vida real.

Cambie el código de ruta de la siguiente manera para incluir el método de almacenamiento


$route['default_controller'] = 'welcome';
$route['contacts'] = 'contacts';
$route['create'] = 'contacts/create';
$route['store'] = 'contacts/store';
$route['edit/:id'] = 'contacts/edit';
$route['update/:id'] = 'contacts/update';
$route['delete/:id'] = 'contacts/delete';
$routes['users'] = 'welcome/users';

Ahora carguemos la biblioteca de validación de formularios en el controlador de Contactos y establezcamos algunas reglas de validación.

Modifique el código como se muestra en la validación del formulario a continuación en el ejemplo de CodeIgniter:


<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Contacts extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper('url', 'form');
        $this->load->library('form_validation');
    }

    public function index() {
        $this->load->view('header');
        $this->load->view('contacts/index');
        $this->load->view('footer');
    }

    public function create() {
        $this->load->view('header');
        $this->load->view('contacts/create');
        $this->load->view('footer');
    }

    public function store() {
        $rules = array(
            array(
                'field' => 'contact_name',
                'label' => 'Contact Name',
                'rules' => 'required'
            ),
            array(
                'field' => 'contact_number',
                'label' => 'Contact Number',
                'rules' => 'required',
                'errors' => array(
                    'required' => 'You must provide a %s.',
                ),
            ),
            array(
                'field' => 'email_address',
                'label' => 'Email Address',
                'rules' => 'required'
            )
        );

        $this->form_validation->set_rules($rules);

        if ($this->form_validation->run() == FALSE) {
            $this->load->view('header');
            $this->load->view('contacts/create');
            $this->load->view('footer');
        } else {
            redirect(base_url('contacts'));
        }
    }

    public function edit($id) {
        $this->load->view('header');
        $this->load->view('contacts/edit');
        $this->load->view('footer');
    }

    public function update($id) {
        $this->load->view('header');
        $this->load->view('contacts/update');
        $this->load->view('footer');
    }

    public function delete($id) {
        $this->load->view('header');
        $this->load->view('contacts/delete');
        $this->load->view('footer');
    }
}

AQUÍ,

Cambie la vista de creación en el código de la aplicación / contactos / create.php como se muestra en el siguiente ejemplo de validación del formulario CodeIgniter:


<div class="column">
    <h2 class="title">Create Contact</h2>
    <div class="notification is-danger">
    <?php echo validation_errors(); ?>
    </div>
    <form action="<?= base_url('contacts/store') ?>" method="POST">
        <div class="field">
            <label class="label">Contact Name</label>
            <div class="control">
                <input id="contact_name" name="contact_name" class="input" type="text" value="<?php echo set_value('contact_name'); ?>" placeholder="Type the contact name">
            </div>
        </div>
        <div class="field">
            <label class="label">Contact Number</label>
            <div class="control">
                <input id="contact_number" name="contact_number" class="input" type="text" value="<?php echo set_value('contact_number'); ?>" placeholder="Type the contact number">
            </div>
        </div>
        <div class="field">
            <label class="label">Email Address</label>
            <div class="control">
                <input id="email_address" name="email_address" class="input" type="email" value="<?php echo set_value('email_address'); ?>" placeholder="Type the email address">
            </div>
        </div>
        <div class="field is-grouped">
            <div class="control">
                <button class="button is-link">Save Contact</button>
            </div>
        </div>
    </form>
</div>

AQUÍ,

Debe cargar la siguiente URL en su navegador web. Luego haga clic en Crear contacto sin ingresar ningún valor

Resumen