#1 Validacion de datos con javascript
Hola gente, tengo el siguiente inconveniente. Estoy validando un formulario y lo que quiero hacer es, que al pasar el foco a otro campo del formulario me valide lo que ingresé en el campo y si es correcto, que me muestre un icono en verde al lado del campo de texto, en caso que no sea correcto me muestre u icono en rojo.
En estos momentos lo que estoy haciendo es poner un borde rojo y verde según pasa el test o no. Pero no se como hacer esto.
EL código es
HTML
<form action="mail.php" method="post">
<p>*Nombre y Apellido:
<input id="nombre" onblur="validarNombre(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 43px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="nombre" />
</p>
<p>*Correo electrónico:
<input id="email" onblur="validarEmail(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 45px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="email" />
</p>
<input class="boton" onclick="return validarCampos(this.form)" type="submit" value="Enviar" name="button" />
</form>
y el .js es
function validarNombre (form) {
var n= form.nombre.value;
if (n == "" ){
form.nombre.style.border = "1px solid red";
}
else{
form.nombre.style.border = "1px solid green";
}
}
Desde ya muchas gracias por su ayuda.
En estos momentos lo que estoy haciendo es poner un borde rojo y verde según pasa el test o no. Pero no se como hacer esto.
EL código es
HTML
<form action="mail.php" method="post">
<p>*Nombre y Apellido:
<input id="nombre" onblur="validarNombre(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 43px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="nombre" />
</p>
<p>*Correo electrónico:
<input id="email" onblur="validarEmail(this.form)" style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 45px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" maxlength="50" size="40" name="email" />
</p>
<input class="boton" onclick="return validarCampos(this.form)" type="submit" value="Enviar" name="button" />
</form>
y el .js es
function validarNombre (form) {
var n= form.nombre.value;
if (n == "" ){
form.nombre.style.border = "1px solid red";
}
else{
form.nombre.style.border = "1px solid green";
}
}
Desde ya muchas gracias por su ayuda.
0
