Rápido y sencillo post sobre la función PHP isset(), dicha función comprueba si una variable está definida o no en el script de PHP que se está ejecutando.

La definición es la siguiente:

Determina si una variable está definida y no es NULL

Otras funciones similares son:

PHP is_null(): Para comprobar si una variable es NULL.
PHP empty(): Para saber si una variable está vacía.

Comparativa de las 3 funciones:

Diferencias entre PHP isset(), empty() e is_null()

Sintaxis de PHP isset()

Vamos a ver la sintaxis extraída de su web oficial:

PHP

1

isset (var1, var2, var3...)

Os explico los parámetros:

La función devuelve TRUE o FALSE.
var1 (Obligatorio): Variable que queremos comprobar si está definida.
var 2, var3… (Opcionales): Variables adicionales a comprobar.

Funcionalidad de PHP isset()

En caso de que al inicio del script la variable exista pero posteriormente se elimine con la función unset() el resultado devuelto por isset() será FALSE.

Si se pasan varias variables el resultado será TRUE si todas ellas están definidas, si alguna no lo está devolvera FALSE.

Otro caso que nos podemos encontrar es que una variable sea NULL, en ese caso devolverá FALSE.

Ejemplos de PHP isset()

He preparado estos ejemplos básicos para que comprobéis el funcionamiento:

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

//Ejemplo con variable definida

$variable = 'valor';

if (isset($variable)) 

	{

    echo "Variable definida!!!";

	}else

		{

		echo "Variable NO definida!!!";

		}

//Ejemplo con variables definidas

$variable = 'valor';

$variable2 = 'valor2';

if (isset($variable,$variable2)) 

	{

    echo "Variables definidas!!!";

	}else

		{

		echo "Variables NO definidas!!!";

		}

//Ejemplo con variables NO definidas

$variable = 'valor';

$variable2 = 'valor2';

if (isset($variable,$variable2, $variable3)) 

	{

    echo "Variables definidas!!!";

	}else

		{

		echo "Variables NO definidas!!!";

		}

Os explico el ejemplo:

En la primera comprobación tenemos la variable definida correctamente, por lo que devuelve TRUE.
En la segunda, tenemos 2 variables y preguntamos si están definidas, devuelve TRUE.
En la tercera y última comprobación preguntamos por una tercera variable que no está definida, devuelve FALSE.

Ejemplos de PHP isset() con arrays

He preparado ese segundo ejemplo aplicando la función con valores de arrays:

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$jugadores = array ('portero' => 'Casillas', 'Defensa' => 'Pepe');

if (isset($jugadores['portero'])) 

	{

	echo "Variable de array definida!!!";

	}else

		{

		echo "Variable de array NO definida!!!";

		}

$jugadores = array ('portero' => 'Casillas', 'Defensa' => 'Pepe');

if (isset($jugadores['delantero'])) 

	{

	echo "Variable de array definida!!!";

	}else

		{

		echo "Variable de array NO definida!!!";

		}

Explico el segundo ejemplo:

En la primera comprobación tenemos un array con 2 claves y valores, preguntamos por una clave definida, por lo que devuelve TRUE.
En la segunda comprobación preguntamos por una clave inexistente, devuelve FALSE

VALIDACIÓN DE FORMULARIOS CON HTML5 Y EXPRESIONES REGULARES SIN USO DE JS. UTILIZACIÓN DE CSS Y FONTAWESOME PARA MOSTRAR CAMPOS VÁLIDOS EN FORMULARIOS

10 de Enero de 2015

Con la nueva versión de HTML5 se han incluido dentro de los controles de formulario nuevos formatos que permiten especificar el tipo de dato a incluir en una etiqueta <input> y que explicaremos brevemente sólo como introducción. Mucho más interesante es el atributo pattern que estudiaremos.

El atributo pattern permite en cualquier campo <input> de tipo texto y utilizando las sobradamente conocidas expresiones regulares delimitar exactamente la sintaxis de una cadena válida. Incluso con CSS3 y webfonts como Font Awesome podremos indicar de forma dinámica sin emplear JavaScript si el contenido de un campo es válido o no.

Pulsando sobre el siguiente botón tendrás acceso al ejemplo explicado en este artículo y a todo el código empleado.

Formulario con validación

ALGUNOS DE LOS NUEVOS TIPOS DE CAMPOS INTRODUCIDOS CON HTML5

No es ninguna novedad enumerar los nuevos tipos de campos introducidos por HTML5, pero siempre hay algún despistado. Es una forma bastante sencilla de incluir una validación básica simplemente delimitando el tipo de datos a incluir. Relaciono los más conocidos, pero ojo: hay algunos navegadores modernos que aún no los reconocen.

Si os interesa este es un buen recurso donde comprobar el soporte de formularios en distintos navegadores: http://www.wufoo.com.mx/html5/

type=”number” Podemos enviar enteros, estableciendo un mínimo y un máximo como input de texto.
type=”range” Podemos enviar enteros, estableciendo un mínimo y un máximo utilizando un control gráfico.
type=”color” Nos permite seleccionar desde un “color picker” un color y enviarlo como hexadecimal.
type=”date” Nos permite seleccionar una día concreto. En los navegadores más avanzados aparece un calendario.
type=”month”, type=”week”, type=”time” Nos permiten seleccionar distintas unidades de tiempo: mes, semana o año.
type=”email” Permite enviar una dirección de email con una pobre validación a nivel de cadena.
type=”url” Permite enviar una url con una pobre validación a nivel de cadena.
type=”tel” Para el envío de números de teléfono.
type=”search” Para definir campos de búsqueda, aunque realmente se comporta como un campo de tipo texto.

Si queréis conocer con más detalle el funcionamiento de estos nuevos controles de formulario os este enlace en W3Schools: http://www.w3schools.com/html/html_form_input_types.asp

Visto lo anterior en cierto modo podemos comenzar a tener cierto control sobre los tipos de datos que pueden admitir los campos input. Hasta ahora con el atributo maxlength podíamos establecer cual era la longitud máxima de una cadena (pero no su mínimo o fijar un tamaño exacto).

Ahora con la inclusión de tipos de datos como email, tel, date, number o url podemos afinar más en el tipo de dato válido. Sin embargo sigue sin ser suficiente.

VALIDACIONES CON EXPRESIONES REGULARES

Según wikipedia: Una expresión regular, a menudo llamada también regex, es una secuencia de caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de patrones de cadenas de caracteres u operaciones de sustituciones.

Y esa misma posibilidad se ha añadido al control de validez de cadenas en los formularios de HTML5. Ahora mediante el atributo pattern, podemos añadir a los <input> de tipo texto como validación por medio de una expresión regular personalizada.

Imaginemos que queremos incluir en el típico formulario de alta que algunos de los campos como nombre, apellidos, email, usuario y contraseña pasen una validación de cadena.

Pongamos una serie de condiciones previas para cada uno de los campos:

Nombre: Admitiremos nombres de cualquier nacionalidad, incluyendo nombres compuestos y la mayoría de normas de acentuación. El número de caracteres será como mínimo 3 y como máximo 32. La verdad es que es una expresión regular ciertamente compleja, pero debemos de tener en cuenta la mayoría de las posibilidades. Esto nos dejaría un código similar a esto:

<div>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,48}" required/>
</div>

Apellidos: Del mismo modo aceptaremos cualquier carácter independientemente de la nacionalidad, con una tamaño entre 2 y 64 caracteres.

<div>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,64}" required/>
</div>

Email: HTML5 ya provee de un tipo de campo email, aunque su validación es bastante pobre. Podríamos complementarla con una expresión más compleja.

<div>
<label for="correo">Correo electrónico</label>
<input type="email" name="correo" id="correo" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required/>
</div>

Usuario: Vamos a solicitar para el usuario de acceso al servicio una cadena de letras minúsculas, con un número opcionalmente de hasta dos dígitos al final. La cadena completa tendrá entre 5 y 12 caracteres.
<div> <label for="usuario">Usuario</label> <input type="text" name="usuario" id="usuario" pattern="^([a-z]+[0-9]{0,2}){5,12}$" required/> </div>

Password: Por último vamos a solicitar una cadena como contraseña, la cual podrá contener letras mayúsculas, minúsculas, números y los caracteres !?-. Su tamaño: entre 8 y 12 caracteres.

<div>
<label for="pass">Contraseña</label>
<input type="password" name="pass" id="pass" pattern="[A-Za-z0-9!?-]{8,12}" required/>
</div>

Con este sencillo código hemos puesto un ejemplo de formulario que simplemente no realizará el envío de datos hasta que todas las condiciones no se cumplan. Obviamente todos estos campos deberán de encontrarse dentro de un formulario HTML para funcionar.

Podrás encontrar más ejemplos de expresiones regulares en esta URL: http://html5pattern.com/ aunque Internet está plagada de páginas y ejemplos de expresiones regulares.

Sin embargo no nos vamos a detener aquí. Vamos a comprobar cómo podemos utilizar CSS para advertir al usuario si el contenido del campo es válido o no.

PSEUDOCLASES EN CSS PARA LA VALIDACIÓN

En CSS3 se añadieron dos pseudoclases relacionadas con la validez de los campos: :valid e :invalid que nos van a permitir dotar de mayor visibilidad a los errores y aciertos de los usuarios al completar los formularios. Por supuesto con un soporte desigual entre los distintos navegadores como verás en el siguiente gráfico:

Añadiendo un poco de CSS podemos hacer que sea un poco más vistoso el resultado válido al introducir un campo.

input:valid {
  background-color: #BBFFF0;
}

AÑADIENDO UN POCO MÁS DE ESTILO CON FONT AWESOME

Como ya he hablado en otros posts soy un gran fan de las webfonts, que nos permiten incluir diseño gráfico de forma muy sencilla, fácilmente reutilizables y con una muy baja penalización en el rendimiento web.

Nuevamente voy a volver a utilizar CSS y Font Awesome para incluir algo más vistoso en la validación. Para ello incluyo en el header la página un link a Font Awesome.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

A continuación incluyo el siguiente código HTML después de cada input, con el icono check que me proporciona Font Awesome.

<i class="fa fa-check check-ok"></i>

Por último solo quedan incluir las siguientes lineas CSS que me permiten por medio del selector de siblings (hermanos o parientes) mostrar el check cuando el contenido del input sea válido u ocultarlo cuando no.

.check-ok {
  color: lime;
}
 
input:invalid ~ .check-ok {
  display: none;
}
 
input:valid ~ .check-ok {
  display: inline;
}

Con esto ya tendremos completamente operativo el formulario, mostrando además un check al lado del campo en cuanto los datos introducidos sean válidos.

CONCLUSIÓN

En este artículo hemos podido ver cómo las nuevas posibilidades de añadir validación con expresiones regulares en HTML5 a los campos de formulario han mejorado bastante las posibilidades y ya no hacen tan imprescindible el uso de JavaScript en formularios pequeños. Sin embargo, ¿esto hace innecesario JavaScript? Personalmente opino que no, salvo en formularios muy sencillos como este. Paso a argumentar dicha opinión.

Se mezclan las capas de validación y presentación en nuestro código. Algo que prefiero mantener diferenciado teniendo por un lado la capa de presentación en HTML y la validación con programación Javascript.
Existen algunos tipos de validaciones que exigen programación. Funciones como por ejemplo la típica en el que se nos solicita incluir dos veces una contraseña para su cotejamiento con otro campo del formulario anterior, que sólo es posible realizar por JavaScript dado que requiere una comparación con otro valor.
Exige estar repitiendo una y otra vez los patrones en cada campo aunque sean los mismos. Algo que en las librerías de JavaScript está mucho mejor resuelto. Existen numerosas librerías, muchas de ellas basadas en jQuery, y que hacen incluso más sencilla la implementación de validación en formularios sin la necesidad de conocer expresiones regulares.
El soporte de ciertos tipos de campos no están implementados en todos los navegadores o de forma desigual. Además de que aún tenemos un importante número de usuarios que siguen funcionando con IE9… Lo de siempre: la única manera de mantener un interfaz unificado todavía sigue siendo el empleo de librerías JS como JQueryUI o validadores como JQuery Validator.

Los nuevos input HTML5 para formularios

6 Marzo, 2014

Formularios en HTML5, HTML5, Nuevos input, etiquetas y atributos en HTML5

4 comentarios

Toca el turno de repasar cada uno de los nuevos input HTML5. Ya he ido haciendo post de cada uno de ellos, pero ahora voy a realizar un listado y breve resumen de cada uno.

Otros post interesantes son:

Tal y como sabréis tenemos muchas razones para usar estos input HTML5 y otras para no usarlos de momento:

PROS: Ahorro considerable de código combinando los nuevos input y atributos. De esta manera no necesitaremos realizar tantas validaciones usando PHP, jQuery o similares.
CONTRA: Al no estar estandarizado HTML5 hace que aún haya elementos que no se representen en bastantes navegadores.

Voy a realizar un listado de cada elemento y posteriormente hago un breve resumen de cada elemento para formularios en HTML5:

Datalist input HTML5

Este nuevo elemento aglutina varios valores predefinidos que facilitan el autocompletado de un campo tipo input.

Es decir, según el usuario va escribiendo, el navegador abre una lista desplegable con las diferentes opciones a seleccionar. Es muy parecido a un combo o lista.

Podéis ver la documentación y ejemplos en el post ‘Datalist en HTML5: Sugiere una lista de valores en un form‘.

Os dejo una imagen de ejemplo:

keygen HTML5

Es un campo para enviar claves en el autentificado web.

Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

Tenéis mas info y ejemplos en el post ‘keygen HTML5: Un nuevo campo para la generación de claves‘.

output HTML5

Esta nueva etiqueta representa el resultado de un cálculo entre los diferentes input de un formulario.

Tened en cuenta que solo representa y no se recoge dicho dato en el envio del formulario. Podéis verlo en funcionamiento en el post ‘HTML5 output: operaciones matemáticas en tiempo real en tu form‘.

number input HTML5

Este input valida automáticamente que los valores introducidos sean numéricos, con el consiguiente ahorro de código en la recepción o validación de los formularios.

El post en el que hay más info es ‘HTML5 number input: Un nuevo campo de tipo numérico en el form‘.

Os dejo una imagen del elemento.

range input HTML5

Este input es muy parecido al HTML5 number input, la diferentecia radica en que en este caso la única manera de especificar el valor es mediante su slider con sus correspondientes límites.

Podéis verlo en funcionamiento en el post ‘HTML5 range input: rangos de valores con barras de desplazamiento‘.

Y aquí una imagen.

tel input HTML5

Este nuevo input html5 resulta muy últil en los dispositivos móviles actuales.

El dispositivo móvil detecta que el input es de tipo ‘tel’ y al pulsar en él automáticamente sale el teclado telefónico del movil para insertar el número en cuestión.

Lo tenéis todo documentado en el post ‘HTML5 tel input: Campo de formulario para números de teléfono‘.

Os pongo un pantallazo capturado en mi iPhone.

email input HTML5

Pues con este la validación de campos de email va a ser tarea sencilla.

El elemento por defecto detecta que el campo debe ser rellenado con contenido válido de una cuenta de email, por lo que mostrará una @ en el teclado y hara las verificaciones pertinentes para cumplir los requisitos de una dirección de email.

Tenéis más info en el post ‘HTML5 email input: Validación automática de emails en formularios‘.

Imagen de ejemplo.

color input HTML5

Representa una paleta (selector) de colores sin necesidad de añadir plugins ni códigos adicionales como veníamos haciendo hasta ahora. Así con un solo click podemos elegir facílmente un color.

Los ejemplos los podéis ver en el post ‘HTML5 color input: Paleta de colores hexadecimal para formularios‘.

Imagen de ejemplo de la paleta de colores.

search input HTML5

Con este input podremos decir en la validación del formulario que el campo contendrá valores de búsqueda, así el propio input nos porporciona un dato válido y el teclado del dispositivo móvil mostrará el botón ‘buscar’.

Más info en esta entrada del blog ‘HTML5 search input: Campo de búsqueda para formularios‘.

Imagen de ejemplo.

url input HTML5

Se parece bastante a el input tel de HTML5. Este campo cuando se visualiza en dispositivos móviles facilita en el teclado las teclas ‘.’, ‘/’, y ‘.com’.

Más info en el post ‘HTML5 url input: Un campo de formulario para urls‘.

Ejemplo.

date input HTML5

Este elemento vale para representar en nuestra web un datepicker o calendario, el formato de la fecha devuelto es ‘AAAA-MM-DD’.

Podéis ver toda la documentación y ejemplos en el post original ‘Date input HTML5: Un sencillo datepicker para tu formulario‘.

Os dejo una imagen de ejemplo.

datetime input HTML5

Input similar al anterior solo que este último además de la fecha envía también la hora. El formato de fecha y hora devuelto es el siguiente: ‘AAAA-MM-DDTHH:MMZ’.

Podéis ver en funcionamiento y su documentación en el post ‘Datetime input HTML5: Un campo de fecha y hora para formularios‘.

Este elemento está sin implementar en casi todos los navegadores y solo funciona a medias en Safari.

datetime-local input HTML5

Más de lo mismo, elemento idéntico al datetime pero sin enviar la zona horaria. El formato devuelto es: ‘AAAA-MM-DDTHH:MM’.

Podéis consultar su sintaxis y funcionamiento en el post ‘Input datetime-local HTML5: fecha y hora local sin timezone para formularios‘.

Os dejo una imagen de ejemplo:

Month input HTML5

Input para representar mes y año con formato ‘AAAA-MM’.

Su documentación y ejemplos la podéis encontrar en ‘Month input HTML5: Un campo de tipo mes para formularios‘.

Os dejo un pantallazo de su representación:

Time input HTML5

Con la inserción de este elemento en un formulario facilitaremos la entrada de datos para horas, el formato de la info enviada es: ‘HH:MM:SS’.

Podéis ver una amplia explicación de su uso en ‘Time input HTML5: Un campo de formulario para introducir la hora‘.

Y aquí tenéis una imagen:

Week input HTML5

Por último nos queda el input para la inserción del número de la semana de un año en cuestión. Su formato es ‘YYYY-WNN’ –> ‘2014-W07’.

También tengo un post hablando sobre este elemento: ‘Week input HTML5: Un nuevo input para insertar semanas‘.

Os muestro una imagen de su funcionamiento:

Buscar este blog

Ana Valentina Montañez Cuellar Informatica 11A

Clase 2017-05-09

Uso de función isset() en PHP

PHP isset(): Comprobar si una variable está definida