bueno como me lo pidieron les muestro el codigo
primero nombre a este archivo index.php
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" media="screen" />
<title>Ingresar al Sistema</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:113px;
height:17px;
z-index:8;
left: 40px;
top: 95px;
}
#apDiv2 {
position:absolute;
width:139px;
height:26px;
z-index:9;
top: 161px;
left: 15px;
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="inde.php" id="form1">
<script type="text/javascript" src="jquery.js"></script>
<div id="contenedor">
<div id="divusuario">
<label for="textfield"></label>
<input name="username" type="password" class="text " id="username" tabindex="2" size="27" />
</div>
<div id="contrasena">
<input name="nombre" type="text" class="text " id="nombre" tabindex="1" size="25" />
</div>
<div id="boton">
<input tabindex="3" name="send" id="mover" type="submit" class="submit" value="Enviar Registro" />
</div>
<div class="Estilo2" id="titulo">
<div id="titulo"align="center">Login de usuario</div>
</div>
<div id="titulos">Datos necesarios, para ingresar al sistema </div>
<div id="labelesusuario"><strong>Login</strong>:</div>
<div id="labelescontrasena"><strong>Password :</strong></div>
<div id="apDiv1"><span class="small" id="req-nombre">Introduce tu login</span></div>
<div id="apDiv2"><span class="small" id="req-username">Introduce tu password</span></div>
</div>
</div>
<script type="text/javascript" src="funciones.js"></script>
</form>
</body>
</html>
otro es main.css
[CSS]@CHARSET "UTF-8";
body{/* este codigo sirve para dar el tipo de letra ala otra pagina */
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.Estilo2 {font-weight: bold; font-size: 18px;}/*para poner en ngrita los titulo*/
#contenedor {
border:solid 2px #b7ddf2;
background:#ebf4fb;
position:absolute;
width:504px;
height:245px;
z-index:1;
left: 163px;
top: 70px;
}
#divusuario {
position:absolute;
width:289px;
height:41px;
z-index:1;
left: 153px;
top: 134px;
}
#contrasena {
position:absolute;
width:268px;
height:39px;
z-index:2;
left: 152px;
top: 73px;
}
#titulo {
position:absolute;
width:496px;
height:27px;
z-index:4;
left: 8px;
top: 0px;
font-size:18px;
}
#titulos{
position:absolute;
width:274px;
height:20px;
z-index:5;
left: 137px;
top: 30px;
}
#labelesusuario {
position:absolute;
width:46px;
height:26px;
z-index:6;
left: 105px;
top: 77px;
}
#labelescontrasena{
position:absolute;
width:79px;
height:23px;
z-index:7;
left: 74px;
top: 140px;
}
#boton {
position:absolute;
width:153px;
height:44px;
z-index:3;
left: 186px;
top: 198px;
}
/* codigo para colocar los errores*/
/***********//***********/
/***********//***********/
labe l{ /*label que contiene lo que esta arriva de la caja de texto*/
display: block;
color: #e4e1cd;
line-height: 2em;
font-size: 14p;
}
/*codgo para diseñar el boton y la caja de texto*/
input.text{ /*para diseñar la cja de texto*/
/*para darle el ancho ala caja de texto*/
background: white ;/*para darle ccolor de fondo ala caja de texto al momento de entrar ala pagina*/
padding: 3px;/*para darle el alto de la caja de texto*/
color: black;/*para darle el color de la letra que se escribira en la caja de texto*/
border: 1px solid #393939;/*para darle el tipoborde ala caj de texto y color*/
font-size: 16px;/*para darle el tamaño de la letra*/
}
input.text.active{/*parab activar el color de la caja de texto al recibir el foco*/
background: #CCCCCC;
border-color: #000;
color: black;
}
input.submit{/*para diseñar el boton*/
width: auto !Important;
background: #999999;
color: #ebf4fb;
padding: 5px;
margin-top: 0.5em;
border: #CCCCCC solid;
}
.requisites.error
{
text-decoration: underline;
background: #fff8cc ;/*para darle un fondo al color del error*/
color: #171717;/*para darle color a la letra del error**/
}
input.error
{
background: #FFFFFF url(img/unchecked.gif) no-repeat scroll right 2px;/*para darle un color al fondo de la caja de texto*/
border-color: #171717;/*para darle color al borde de la caja de texto*/
border:dotted #FF0000;/*para aser el borde punteado con color*/
}
/*para una vez cvompletado poner en notro color la caja de texto*/
input.completado
{
background: #ebf4fb url(img/checked.gif) no-repeat scroll right 2px;/*para darle un fondo al color del error*/
border-color: #171717;/*para darle color al borde de la caja de texto*/
border:solid black;/*para aser el borde punteado con color*/
color:#CCCCCC;/*para darl color ala caja de texto*/
}
[/CSS]
otro es funciones.js
Código Javascript
:
Ver original$(document).ready(function(){
//variables globales
var searchBoxes = $(".text");
var inputUsername = $("#username");
var reqUsername = $("#req-username");
var x=$("#req-username")
var inputNombre = $("#nombre");
var reqNombre = $("#req-nombre");
//funciones de validacion
function validateUsername(){
if(!inputUsername.val().match(/^[a-zA-Z]+$/))
{
inputUsername.removeClass("completado");
reqUsername.addClass("error");
inputUsername.addClass("error");
return false;
}
// SI longitud, SI caracteres A-z
else
{
inputUsername.addClass("completado");
reqUsername.removeClass("error");
inputUsername.removeClass("error");
return true;
}
}
function validateNombre()
{
if(!inputNombre.val().match(/^[a-zA-Z]+$/))
{
inputNombre.removeClass("completado");
reqNombre.addClass("error");
inputNombre.addClass("error");
return false;
}
else
{
inputNombre.addClass("completado");
reqNombre.removeClass("error");
inputNombre.removeClass("error");
return true;
}
}
//controlamos la validacion en los distintos eventos
// Perdida de foco
inputUsername.blur(validateUsername);
inputNombre.blur(validateNombre);
// Pulsacion de tecla
inputUsername.keyup(validateUsername);
inputNombre.keyup(validateNombre);
// Envio de formulario
$("#form1").submit(function(){
if(validateUsername() & validateNombre() )
return true;
else
return false;
});
//controlamos el foco / perdida de foco para los input text
searchBoxes.focus(function(){
$(this).addClass("active");
});
searchBoxes.blur(function(){
$(this).removeClass("active");
});
});
para q lo vean