Cursos online y materiales digitales para estudiantes y desarrolladores web

formularios

Cómo deshabilitar Javascript en todos los navegadores

Publicado el por Leave a Comment

A estas alturas ya tenemos claro que realizar una validación de un formulario únicamente utilizando HTML5 y Javascript no es seguro, y que la finalidad de este tipo de validación es otra.

Y de hecho, hemos aprendido a saltarnos la validación HTML5 de un formulario únicamente con un par de palabras reservadas en el código HTML de la página mediante la consola del navegador.

Pues bien, en este post le toca el turno a Javascript. Y es que podemos evitar toda ejecución de código Javascript deshabilitándolo en el navegador.

¿Quieres saber cómo hacerlo en Mozilla Firefox, Chrome, Safari o Edge? ¡Te lo cuento!

Y tú, ¿conoces otras maneras de saltarte la validación de un formulario del lado del cliente?

Cómo saltarse la validación HTML5 de un formulario

Publicado el por Leave a Comment

En un post anterior explicaba lo poco seguro que es realizar la validación de un formulario únicamente utilizando HTML5 y Javascript.

De hecho, saltarse la validación HTML5 es tan sencillo como introducir un par de palabras reservadas en el código HTML utilizando la consola del desarrollador de nuestro navegador.

¿No te lo crees? ¡Echa un ojo al vídeo!

Y tú, ¿conoces otras maneras de saltarte la validación de un formulario del lado del cliente?

¿Es seguro validar un formulario con Javascript?

Publicado el por 6 Comments

A veces pensamos que con hacer una buena validación con HTML5 e incluso con Javascript es suficiente para hacer un formulario seguro… ¡nada más lejos de la realidad!

En el vídeo de esta lección podrás ver con detalle por qué es necesario validar del lado del cliente, y por qué no es suficiente.

Tipos de validación

En primer lugar tenemos que tener en cuenta que hay dos tipos de validación:

  • Validación del lado del cliente: podemos realizarla, a su vez, con la validación incorporada de las etiquetas HTML5, y personalizarla a nuestro gusto con Javascript.
  • Validación del lado del servidor: que debemos hacerla desde el lenguaje de programación de servidor (PHP, ASP, JSP, etc.) y desde las propias restricciones de la base de datos.

Por qué validar desde el lado del cliente

Hay dos razones básicas por las que la validación del lado del cliente es necesaria:

  • Mejora la experiencia de usuario, algo esencial en el desarrollo web. (¿Que qué es eso? ¡Echa un ojo al vídeo y te lo explico!).
  • Evita los retrasos de la comunicación entre el cliente y servidor.

Estamos rodeados de buenos y malos ejemplos de experiencia de usuario todos los días. En el vídeo vemos cómo Amazon y el Ministerio de Educación y Formación Profesional son dos muestras de ello… ¿cuál es cuál?

Por qué NO solo validar desde el lado del cliente

Ya está claro por qué la validación del lado del cliente es necesaria. Ahora debemos saber que la validación solo desde el lado del cliente es una práctica muy arriesgada porque evitarla es tan fácil como hacer un par de clicks.

En este vídeo verás en qué consisten cada una de las validaciones que he mencionado, las razones por las que la validación del lado del cliente es necesaria y por qué es insegura. ¿Quieres verlo? ¡A qué esperas! 😊

Reto resuelto: Dustin, Suzie y la constante de Planck

Publicado el por 2 Comments

Stranger Things

Stranger Things

Programación

Validar una contraseña con Javascript

La semana pasada recibíamos el reto para ponérselo difícil a los personajes de Stranger Things, cuyo título era «Dustin, Suzie y la constante de Planck«.

Enunciado del reto

El reto decía así:

Señorita Ada:
Necesitamos que cree un formulario que compruebe si se ha introducido correctamente la constante de Planck.
* Que, por cierto, es 6.62607015, aunque Suzie menciona una versión anterior 6,62607004.

En esta ocasión, y basándonos en el reto de la semana anterior (Berlín, Tokio y Moscú también son capitales), he diseñado dos soluciones:

  • Una sencilla, que comprueba simplemente que la contraseña cumple con alguno de los dos valores de la constante de Planck.
  • Una un poco más compleja y que se lo pone chupao a los que tienen que introducirla: además de comprobar los valores validamos el formulario HTML.

Pero recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

¿Qué aprenderás en los vídeos?

Así que en estos dos vídeos os explico:

  • Cómo asignar un evento a un objeto (en este caso, al botón enviar) para que se ejecute una función cuando hacemos click sobre él.
  • Cómo llamar a a función con nombre y a una función anónima asociadas a un evento.
  • Cómo evitar el envío de un formulario.
  • Cómo comprobar que un valor se corresponde con uno de entre cuatro.
  • Cómo crear un patrón para un decimal como la constante de Planck.
  • Cómo realizar una validación de campo no vacío y patrón.
  • Cómo utilizar el selector :valid e :invalid de CSS para asignar un estilo a un campo que cumple con las restricciones… o no.
  • Cómo usar validity y no morir en el intento.
  • Cómo modularizar el código con tres funciones.

Vídeos y código fuente

¡Basta de rollos! ¡Echa un ojo a los vídeos!

Código fuente de la solución (1/2)
¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!
Código fuente de la solución (2/2)
¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

¿Tú cómo lo habrías hecho? ¡Deja tus ideas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…