[SOLUCIONADO] Validación Javascript

[bienpiyao]

Hola cracks!

Tengo un formulario de registro al que le tengo ahora mismo una validación JavaScript usando LiveValidation. El problema es que no consigo hacer que los mensajes de error me los muestre en la siguiente línea, es decir, debajo del campo de texto en lugar de a su derecha.

Dicho esto, he estado investigando un poco otras librerías de este tipo para poner algo más "moderno".

Os quería preguntar qué librería tipo LiveValidation me recomendáis (he de decir que soy bastante torpe con JavaScript y CSS, por lo que os pediría una sencillita y que pueda ser "fácilmente" editable). O si alguien sabe dónde tengo que tocar para "forzar" a poner el mensaje de error en la siguiente línea (vamos, meter un salto de línea justo antes del texto de error).

Muchas gracias por anticipado.

Un saludo!

[PIRRUMAN]

podrias colocar el codigo

[Carlangueitor]

Seguramente con puro CSS puede arreglarlo.

[bienpiyao]

Muy buenas PIRRUMAN, gracias por contestar...¿Quieres que ponga todo el código de la librería liveValidation? :S, son casi mil lineas de código...Te voy a poner un extracto de la validación de uno de los campos del formulario, por si te sirve de algo jejeje

<li class="campoForm">
<label for="nombre">
Nombre:
</label>
<input name="nombre" type="text" id="nombre" minlength="4" maxlength="20">
<!-- Este es el script para comprobar que se introdujo algo en el campo de texto -->

<script type="text/javascript">
var nombre = new LiveValidation( 'nombre');
nombre.add( Validate.Presence );
nombre.add( Validate.Length, { minimum: 4, maximum: 20 } );
</script>
</li>


Hola Carlangueitor, gracias por contestar...te pego el css que trae dicha librería a ver si me puedes ayudar:

@charset "utf-8";
/* CSS Document */

.LV_validation_message{
font-weight:bold;
margin:0 0 0 10px;
}

.LV_valid {
color:#00CC00;
}

.LV_invalid {
color:#FD4D4D;
font-size:10px;
}

.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
border: 2px solid #00CC00;
}

.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
border: 2px solid #FD4D4D;
}


Un saludo a ambos y gracias por anticipado.

[PIRRUMAN]

encontre dos opciones de como "customizarlo"

1.- en algun momento colocas el texto de mensaje fallido o correcto,, a ese mensaje agregale un salto de linea html (<br>) por ejemplo : en el mensaje de exito tu texto seria "<br> campo valido"

2.- manipulando tu clase "LV_validation_message" agrega la propiedad "float:left" y modifica la propiedad "margin" a "margin:40px 0 0 10px;" , tendrias que manipular las clases que puedan verse afectadas tambien , es decir , las clases de tu textbox y de tu label

[bienpiyao]

Hola de nuevo, perdonad la tardanza pero he estado de vacaciones.

Muchísimas gracias por la ayuda, pues he podido solucionar el problema.

Un saludo y lo dicho, muchas gracias!