→ wForms →

Personalizar mensajes de error en wForms

Creado: 09/Dic/2007 Actualizado: 16/Dic/2025

Si no configuramos nada de wForms, los mensajes tienen un comportamiento predeterminado. Este comportamiento es que los mensajes salen justamente debajo del elemento del formulario que ha generado el error y un popup que indica el número de errores que hay en total.

Además el texto de los mensajes es en inglés.

Pero mediante código JavaScript podemos personalizar el comportamiento de los mensajes de error. Para ello podemos alterar tres cosas:

  • El texto
  • La apariencia
  • La posición dentro del formulario

El texto

El texto se encuentra dentro del objeto wFORMS.behaviors[‘validation’]. En él encontramos las diferentes propiedades que podemos modificar. Cada una de las propiedades hace referencia a un tipo diferente de error. Así tenemos las siguientes:

  • .errMsg_required, para los campos obligatorios.
  • .errMsg_alpha, para los errores alfabéticos.
  • .errMsg_email, para las validaciones del formato del email.
  • .errMsg_integer, para las validaciones de numeros enteros.
  • .errMsg_float, para validar numeros decimales.
  • .errMsg_alphanum, para validaciones alfanuméricas.
  • .errMsg_date, validaciones de fechas.
  • .errMsg_custom, mensajes personalizados.
  • .errMsg_notification, es el error del mensaje popup.

Solo tendremos que incluir un pequeño código JavaScript sobrescribiendo el valor de estas propiedades, por ejemplo.

<script type="text/javascript">
wFORMS.behaviors['validation'].errMsg_required = "Campo obligatorio";
wFORMS.behaviors['validation'].errMsg_alpha = "El campo tiene que ser alfabético";
wFORMS.behaviors['validation'].errMsg_email = "El campo tiene que ser un email";
wFORMS.behaviors['validation'].errMsg_integer = "El campo tiene que ser un numero entero";
wFORMS.behaviors['validation'].errMsg_float = "El campo tiene que ser un numero decimal";
wFORMS.behaviors['validation'].errMsg_alphanum =" El campo tienen que ser alfanumérico";
wFORMS.behaviors['validation'].errMsg_date = "El campo tiene que ser una fecha";
wFORMS.behaviors['validation'].errMsg_custom = "Mensaje personalizado";
wFORMS.behaviors['validation'].errMsg_notification = "%% error(s) detectado(s). El formulario no se enviará.\nPor favor, chequea la información suministrada.";
</script>

 

La apariencia

A la hora de modificar la apariencia de los mensajes de error, vía CSS podemos modificar dos elementos. El primero será el campo del formulario que contiene error (.errFld) y el segundo es el texto de error asociado (.errMsg).

Simplemente tendremos que redefinir estas clases CSS modificando el valor de sus atributos:

<style type="text/css">
  .errFld {border: 1px solid #F00; background: #FF6347;}
  .errMsg { color: #C33; }
</style>

Este código lo podemos añadir de igual forma en la cabecera de la página.

La posición dentro del formulario

Lo último que podemos personalizar en los mensajes de error de wForms, es la zona donde queremos que salgan.

Para ello, tendremos que crear un elemento DIV o SPAN cuyo identificador siga la siguiente nomenclatura:

idcampoformulario-E

De esta manera, si tenemos un campo de formulario llamado fechadenacimiento, tendremos que crear el siguiente elemento:

<span id="fechadenacimiento-E"></span>

Y posicionarlo donde queramos que salga el error.

Visualizar el ejemplo | Descargar el código

Artículos
→ CSS →

Definir el tamaño de una imagen con CSS

Creado: Actualizado: 24/Oct/2023

En las primeras versiones del lenguaje HTML cuando se mezclaba el contenido como el diseño lo más normal es apoyarnos en el lenguaje HTML para definir el tamaño de una imagen. Si bien, una vez que se separa el diseño del contenido y aparece CSS como lenguaje de definición de estilos la idea es utilizar estilos CSS para definir el alto y ancho de una imagen. En este artículo vamos a ver cómo podemos definir el tamaño de una imagen con CSS.

Lo que vamos a hacer es definir un conjunto de clases CSS, la cual aplicaremos dependiendo de las necesidades de tamaño que tengamos para las imágenes dentro de nuestra página web en el código HTML.

Para poder dar el estilo utilizaremos las propiedades width y height, de igual manera que los utiliza el lenguaje HTML como atributos del elemento img, pero en este caso los asignaremos a una clase.

De esta manera generaremos el siguiente código en CSS que incluiremos dentro de nuestra definición de estilos:

img.pequeña{
  width: 50px;
  height: 50px;
}
img.mediana{
  width: 100px;
  height: 100px;
}
img.grande{
  width: 200px;
  height: 200px;
}

Como se puede ver se han definido tres clases: pequeña, mediana y grande. Las cuales solo funcionaran sobre elementos img, si no hubiésemos antepuesto este elemento en la definición del estilo, podríamos haber utilizado las clases para cualquier tipo de elemento HTML.

Solo nos quedará el asignar la clase a un elemento img. Para ello utilizamos el atributo class. Así tendremos el siguiente código:

<img class="pequeña" src="lineadecodigo.jpg" />
<img class="mediana" src="lineadecodigo.jpg" />
<img class="grande" src="lineadecodigo.jpg" />

Así la página HTML completa nos quedará de la siguiente forma:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tamaño de una imagen con CSS</title>
  <style type="text/css">
    img.pequeña{width: 50px; height: 50px;}
    img.mediana{width: 100px; height: 100px;}
    img.grande{width: 200px; height: 200px;}
  </style>
</head>
<body>

<h1>Tamaño de una imagen con CSS</h1>

<img class="pequeña" src="lineadecodigo.jpg"/>
<img class="mediana" src="lineadecodigo.jpg"/>
<img class="grande" src="lineadecodigo.jpg"/>

</body>
</html>

Vemos que hemos añadido el código CSS dentro del elemento style en la cabecera o head de la página.

Con estos pasos tan sencillos habremos conseguido definir el tamaño de una imagen con CSS. ¿Cómo haces tú para poder definir el tamaño de una imagen, ya que existen más alternativas? ¿Creas una clase? ¿Lo asignas directamente a un elemento? Cuéntanos en los comentarios ya que estaremos encantados de saberlo.

Código Fuente

Descárgate el código fuente de Definir el tamaño de una imagen con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Definir el tamaño de una imagen con CSS

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS