Posicionar el lugar de error en wForms

11/Dic/2007 wForms , Deja un comentario

Si utilizamos wForms veremos que los mensajes de error siempre se posicionan debajo del campo del formulario que ha generado el error. Si bien, de una forma muy sencilla podremos definir donde queremos que salga el error.

Lo más normal es que el error se muestre cerca del campo que ha generado el error para, de esta forma, ayudar al usuario a localizar el campo y corregir el error. Si bien, en ciertos casos, piden a los programadores que los errores se sitúen en sitios insospechados.

Por ejemplo, si tenemos un formulario que pida un nombre y una edad, podríamos querer mostrar el error, siempre, en la parte inferior, entre el último campo y el botón de envío.

Tendríamos el siguiente formulario:

<form>
<label for="nombre">Nombre:</label><input type="text" id="nombre" class="validate-alpha required"><br>
<label for="edad">Edad:</label><input type="text" id="edad" class="validate-integer required"><br>
<input type="submit" value="Enviar">
</form>

Para posicionar la zona del error tendremos que posicionar una estructura SPAN o DIV cuyo id sea el nombre del campo asociado al error seguido de un guión y E.

Así los id de estos campos para nuestro caso serían

nombre-E
edad-E

A si que tendríamos que poner el siguiente código donde queramos que salga el error:

<span id="nombre-E"></span>
<span id="edad-E"></span>

El formulario completo, dejando el campo del error entre los campos de texto y el botón de envío sería el siguiente:

<form>
<label for="nombre">Nombre:</label><input type="text" id="nombre" class="validate-alpha required"><br>
<label for="edad">Edad:</label><input type="text" id="edad" class="validate-integer required"><br>
<span id="nombre-E"></span><span id="edad-E"></span><br>
<input type="submit" value="Enviar">
</form>

Visualizar el ejemplo | Descargar el código

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*