Duda formulario HTML

[IVICP3]

Tengo este formulario

Código HTML:

<label class="tituloform" for="Usuario">Usuario</label></td><td align="left">
<input type="text" name="Usuario" id="User" class="validacion fallovalidacion" value=""></td></tr><tr class="reg-tr"><td align="left">

<label class="tituloform" for="email">Email</label></td><td align="left">
<input type="text" onkeypress="" name="email" class="validacion fallovalidacion" id="email" value=""></td></tr>

<tr class="reg-tr"><td align="left">
<label class="tituloform" for="contra">Contraseña</label></td><td align="left">
<input type="contra" name="contra" class="validacion fallovalidacion" id="contra"></td></tr> 

Las clases de cada input

Código CSS:

.validacion{
width: 220px;
box-shadow: 0 1px 1px #e6e6e6;
}
 
.fallovalidacion{
background-color: #fcf1f1;
border: solid 1px #e8270d;
}
 

La clase validacion es un simple borde azul cuando el usuario hace click en el input para escribir el usuario o la contraseña.

La clase fallovalidacion es un borde rojo al input para mostrar al usuario que hace falta ese campo, ya que no puede registrarse sin contraseña.

como puedo programar ese error que tengo que mostrarle al usuario?

Gracias.

[PHPeros]

Puedes utilizar las pseudo-clases :valid e :invalid

[IVICP3]

Iniciado por PHPeros

Puedes utilizar las pseudo-clases :valid e :invalid

Gracias, he usado esto:

Código CSS:

input:required {
  border: 1px solid blue;
}
input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}
 

Pero lo unico que me sale es de color verde los inputs, no me salen rojos cuando no escribo nada.

[AngelKrak]

Iniciado por IVICP3

Gracias, he usado esto:

Código CSS:

input:required {
  border: 1px solid blue;
}
input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}
 

Pero lo unico que me sale es de color verde los inputs, no me salen rojos cuando no escribo nada.

amigo pon los colores Hexadecimales y no los nombres ;)

[caricatos]

Hola:

Iniciado por AngelKrak

amigo pon los colores Hexadecimales y no los nombres ;)

¿Por qué?, y ¿qué tiene que ver con el tema...?



Saludos

[fede5426]

Iniciado por IVICP3

Gracias, he usado esto:

Código CSS:

input:required {
  border: 1px solid blue;
}
input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}
 

Pero lo unico que me sale es de color verde los inputs, no me salen rojos cuando no escribo nada.

Será porque :invalid controla que hayas escrito los caracteres válidos segun el type del input? Es decir, si es un input type="email" va a controlar que cumplas la sintaxis de la caja, que seria [email protected] y mientras eso no se cumpla, se aplicaran los estilos :invalid..

Pregunto en serio, no es sarcasmo jaja se me acaba de presentar esa duda..

[pzin]

Si es un campo que no puede estar vacío, tendrás qud indicarlo con required.