eamexicano

Validación formularios

Categories:

Podemos validar formularios en JavaScript, determinar si un campo tiene o valor asignado – NULL – en MySQL, pero además, es importante validar los valores envíados por un formulario en PHP. Esto es porque el usuario puede deshabilitar JavaScript en el navegador, podemos tener un error en el código de JavaScript haciendo que nuestro script no funcione correctamente o, simplemente un usuario hace un formulario idependiente de nuestra aplicación y envía los valores de su formulario al URL en el cuál nuestra aplicación recibe los valores.

Para realizar una validación básica vamos a utilizar las siguientes funciones:

empty

Determina si una variable está vacía.

isset

Determina si una variable está establecida y no es null.
En lo personal prefiero utilizar isset para que, en el caso en que la variable se encuentre definida, aplique otras reglas de validación como parte del condicional principal – if – y no como parte de la excepción – else -.

strlen

Obtiene la longitud de una cadena de texto.
Podemos utilizar esta función para verificar que el número de caracteres de una cadena de texto tenga un valor mínimo, un valor máximo o se encuentre dentro de un rango.

in_array

Comprueba si un valor existe dentro de un arreglo.
Podemos utilizar esta función para comparar que el valor enviado por campos excluyentes / incluyentes se encuentre dentro de los valores que tenemos definidos.

preg_match

Realiza una comparación con una expresión regular.
Esta función es la más complicada de utilizar – en comparación con las antes mencionadas – por la definición de las expresiones regulares.

Dependiendo del tipo de campo podemos tener distintas validaciones.
En todos los casos es conveniente revisar primero que exista el parámetro con el nombre del atributo que queremos validar.
Si no está definido el parámetro quiere decir que el usuario no utilizó el campo, si intentamos validarlo PHP nos va a mostrar una advertencia de índice no definido Notice: Undefined index.

Campos Básicos
Podemos validar:
Que el valor no sea una cadena de texto vacía.
Que el número de caracteres tenga un valor mínimo / máximo o se encuentre dentro de un rango.
Comparar el contenido con una expresión regular para validar que cumple con un patrón.

Campos Excluyentes
Podemos validar:
En el caso de las opciones de radio, que esté definida la opción.
En el caso de la etiqueta select – al tener una opción inicial -, verificamos que el valor enviado no sea el valor de la opción predeterminada.
También podemos verificar que el valor enviado se encuentre dentro de los valores válidos para esa opción.

Campos Incluyentes
Podemos validar:
Que esté seleccionada al menos una casilla de selección.
Que cada elemento seleccionado se encuentre dentro de los valores válidos para esa opción.

Campos Acciones
Podemos validar que el botón haya sido presionado.
Esto resulta útil cuando el procesamiento del formulario se realiza en el mismo archivo.

En el siguiente ejemplo se revisan los valores enviados por un campo de texto, dos campos de radio, un campo de selección – select – y dos casillas de selección – checkbox -.

<h3>Validación Formulario</h3>

<?php

$mensaje = "";
$opciones_select = ["select 1", "select 2"];        

// Verificar que se haya presionado el botón del formulario
// para realizar las validaciones de cada uno de los campos.
if (isset($_GET['enviar'])) {
  $mensaje .= "Se envió el formulario.<br>";          

  // Verificar que tenga valor el campo básico
  if (!empty($_GET['basico'])) {

    // Verificar que el número de caracteres sea mayor a 2 y menor a 10
    if (strlen($_GET['basico']) > 2 &&  strlen($_GET['basico']) < 10) {
      $mensaje .= "El número de caracteres es mayor a dos y menor a 10.<br>";

      // Comparar el valor contra una expresión regular
      // para determinar si tiene el formato de un correo electrónico
      if (preg_match("/[a-z]+@[a-z]+\.[a-z]+/", $_GET['basico']))  {
        $mensaje .= "Parece una dirección de correo válida.<br>";
      } else {
        $mensaje .= "No parece una dirección de correo válida.<br>";
      }
    } else {
      $mensaje .= "El número de caracteres es menor o igual a dos o mayor o igual a 10.<br>";
    }
  } else {
    $mensaje .= "No se envió el campo básico.<br>";
  }
  
  // Verificar que se haya seleccionado una opción 
  // de los campos de radio
  if (isset($_GET['radio'])) {
    $mensaje .= "El valor que contiene la opción seleccionada es: " . $_GET['radio'] . ".<br>";
  } else {
    $mensaje .= "No se eligió una opción en los campos de radio.<br>";
  }
  
  // Verificar que se haya seleccionado una opción 
  // de los campos de radio y que no sea la que está por defecto en el formulario.
  if (isset($_GET['select']) && $_GET['select'] !== '0') {

    // Verificar que el valor enviado se encuentre dentro de las opciones que definimos
    if ( in_array($_GET['select'], $opciones_select) ) {
      $mensaje .= "El valor que contiene el campo de selección es " . $_GET['select'] . " y está dentro de las opciones predefinidas.<br>";
    } else {
      $mensaje .= "El valor que contiene el campo de selección no está dentro de las opciones predefinidas.<br>";
    }
  } else {
    $mensaje .= "No se eligió una opción en el campos de selección.<br>";
  }

  // Verificar que se haya seleccionado al menos una casilla de selección
  if (isset($_GET['check'])) {            
    for ($i=0; $i < count($_GET['check']) ; $i++) {
      $mensaje .= "El valor de la casilla de selección es: " . $_GET['check'][$i] . ".<br>";
    }  
  } else {
    $mensaje .= "No se marcó ninguna casilla de selección.<br>";
  }
  
} // $_GET['enviar']

echo "<p>" . $mensaje . "</p>";

?>

<form action="#" method="get" accept-charset="utf-8">

  <label>Campo básico</label><br>
  <input type="text" name="basico" placeholder="Campo básico"><br>
  
  <label>Campo excluyente - radio - </label> <br>
  <label><input type="radio" name="radio" value="radio 1">Radio 1</label><br>
  <label><input type="radio" name="radio" value="radio 2">Radio 2</label><br>     

  <label>Campo excluyente - select - </label><br>
  <select name="select">
    <option value="0"> -- Elige una opción -- </option>
    <option value="select 1">Select 1</option>
    <option value="select 2">Select 2</option>   
  </select><br>

  <label>Campo incluyente - checkbox - </label><br>
  <label><input type="checkbox" name="check[]" value="check 1">Check 1</label><br>
  <label><input type="checkbox" name="check[]" value="check 2">Check 2</label><br>               

  <!-- El botón es un campo de "acciones" -->
  <input type="submit" name="enviar" value="Enviar">

</form>

Al recibir los valores se muestra un mensaje que nos indica el estado de cada campo, es decir, si tiene contenido (campo básico) o si están seleccionados (campos excluyentes / incluyentes) y en caso de tener contenido / estar seleccionados el valor que tienen.

Pero falta visualizar dentro del formulario esos valores, el siguiente ejemplo incluye esa funcionalidad. Para lograrlo se crearon variables – con el nombre del tipo de campo – en las cuales se van a guardar los valores enviados – si existen – y, al momento de generar el HTML:

En el campo básico se incluye el valor.
En los botones de radio se compara el valor almacenado con el valor del HTML, si son iguales se agrega el atributo “checked”.
En las opciones – options – del campo de selección – select – se compara el valor almacenado con el valor del HTML, si son iguales se agrega el atributo “selected”.
En las casillas de selección se compara si el valor del HTML se encuentra dentro de un arreglo que corresponde a las opciones que el usuario seleccionó al enviar el formulario.
Si es así, se le agrega el atributo “checked” a cada una de las opciones.

<h3>Validación Formulario</h3>
<?php

// Crear variables para guardar los valores
// enviados por el formulario y poderlos visualizar
$mensaje = "";
$basico = "";
$radio = "";
$select = "";
$check = [];
$opciones_select = ["select 1", "select 2"];        

// Verificar que se haya presionado el botón del formulario
// para realizar las validaciones de cada uno de los campos.
if (isset($_GET['enviar'])) {
  $mensaje .= "Se envió el formulario.<br>";
  
  // Verificar que tenga valor el campo básico
  if (!empty($_GET['basico'])) {
    $basico = $_GET['basico'];
    
    // Verificar que el número de caracteres sea mayor a 2 y menor a 10
    if (strlen($_GET['basico']) > 2 &&  strlen($_GET['basico']) < 10) {
      $mensaje .= "El número de caracteres es mayor a dos y menor a 10.<br>";
    
      // Comparar el valor contra una expresión regular
      // para determinar si tiene el formato de un correo electrónico
      if (preg_match("/[a-z]+@[a-z]+\.[a-z]+/", $_GET['basico']))  {
        $mensaje .= "Parece una dirección de correo válida.<br>";
      } else {
        $mensaje .= "No parece una dirección de correo válida.<br>";
      }
    } else {
      $mensaje .= "El número de caracteres es menor o igual a dos o mayor o igual a 10.<br>";
    }
  } else {
    $mensaje .= "No se envió el campo básico.<br>";
  }
  
  // Verificar que se haya seleccionado una opción 
  // de los campos de radio
  if (isset($_GET['radio'])) {
    $radio = $_GET['radio'];            
    $mensaje .= "El valor que contiene la opción seleccionada es: " . $_GET['radio'] . ".<br>";
  } else {
    $mensaje .= "No se eligió una opción en los campos de radio.<br>";
  }
  
  // Verificar que se haya seleccionado una opción 
  // de los campos de radio y que no sea la que está por defecto en el formulario.
  if (isset($_GET['select']) && $_GET['select'] !== '0') {
    // Verificar que el valor enviado se encuentre dentro de las opciones que definimos
    if ( in_array($_GET['select'], $opciones_select) ) {
      $select = $_GET['select'];
      $mensaje .= "El valor que contiene el campo de selección es " . $_GET['select'] . " y está dentro de las opciones predefinidas.<br>";
    } else {
      $mensaje .= "El valor que contiene el campo de selección no está dentro de las opciones predefinidas.<br>";
    }
  } else {
    $mensaje .= "No se eligió una opción en el campos de selección.<br>";
  }

  // Verificar que se haya seleccionado al menos una casilla de selección
  if (isset($_GET['check'])) {
    $check = $_GET['check'];
    for ($i=0; $i < count($_GET['check']) ; $i++) {
      $mensaje .= "El valor de la casilla de selección es: " . $_GET['check'][$i] . ".<br>";
    }
  } else {
    $mensaje .= "No se marcó ninguna casilla de selección.<br>";
  }
  
} // $_GET['enviar']



echo "<p>" . $mensaje . "</p>";

?>

<form action="#" method="get" accept-charset="utf-8">

  <label>Campo básico</label> <br>
  <input type="text" name="basico" placeholder="Campo básico" value="<?php echo $basico; ?>"> <br>
  
  <label>Campo excluyente - radio - </label> <br>
  <label>
    <input 
      type="radio" 
      name="radio" 
      value="radio 1" 
      <?php 
        if ("radio 1" ==  $radio) {
          echo "checked";
        }
      ?>
    >Radio 1
  </label><br>
  <label>
    <input 
      type="radio" 
      name="radio" 
      value="radio 2" 
      <?php 
        if ("radio 2" ==  $radio) {
          echo "checked";
        }
      ?>              
      >Radio 2
  </label><br>
  
  <label>Campo excluyente - select - </label> <br>
  <select name="select">
    <option value="0"> -- Elige una opción -- </option>
    <option 
      value="select 1"
      <?php 
        if ("select 1" ==  $select) {
          echo "selected";
        }
      ?>
      >
      Select 1
    </option>
    <option 
      value="select 2"
      <?php 
        if ("select 2" ==  $select) {
          echo "selected";
        }
      ?>
      >
      Select 2
    </option>
  </select> <br>
  
  <label>Campo incluyente - checkbox - </label> <br>
  <label>
    <input 
      type="checkbox" 
      name="check[]" 
      value="check 1"
      <?php
      if ( in_array("check 1", $check)) {
        echo "checked";
      }
      ?>
    >Check 1
  </label><br>
  <label>
    <input 
      type="checkbox" 
      name="check[]" 
      value="check 2"
      <?php
      if ( in_array("check 1", $check)) {
        echo "checked";
      }
      ?>              
    >Check 2
  </label><br>
  
  <!-- El botón es un campo de "acciones" -->
  <input type="submit" name="enviar" value="Enviar">

</form>