Problema al implementar funciones .js en html y php

[easolano5]

Amigos tengo un problema con php y .js resulta que tengo un sistema de login, sencillo y me funciona sin implementar funciones en js pero cuando implemento estas funciones que solo son dos, validar si los campos se envían vacíos, entonces tengo un problema que no me envia los datos via POST como debería:

Esto es lo que tengo:

script funciones.js

function validarlogin()
{
var form=document.form;
var ok1,ok2;
if(form.nombre.value==0)
{
//alert("El campo nombre est� vacio");
document.getElementById("div_usuario").innerHTML=" El campo Nombre está vacio";
form.nombre.value="";
form.nombre.focus();
return false;
}
else
{
document.getElementById("div_usuario").innerHTML=" ";
ok1=true;
}
if(form.password.value==0)
{
//alert("El campo Clave est� vacio");
document.getElementById("div_clave").innerHTML="El campo Clave está vacio";
form.password.value="";
form.password.focus();
return false;
}
else
{
document.getElementById("div_clave").innerHTML="";
ok2=true;
}
//Si todo esta bien se redirecciona al action
if(ok1==true && ok2==true)
{ window.location='login_es.php'; }

}

Este es el html

<table width="270" border="0" cellpadding="0" cellspacing="0" align="center" class="Fuentes-Formularios">
<form name="form" method="post" action="login_es.php">
<tr>
<td width="70">Usuario:</td>
<td width="200" align="right"><input type="text" name="nombre">
<div id="div_usuario" class="fuenterror"></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td width="70">Clave:</td>
<td width="200" align="right">
<input type="password" name="password" />
<div id="div_clave" class="fuenterror"></div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Ingresar" title="Ingresar" onClick="validarlogin();"/>
</td>
</tr>
</form>
</table>

y este es el script php:

<?php
session_start();
require_once("conexion.php");

//************************************************** *************
//Preguntamos si el usuario existe en la base de datos
$sql="select nombre from usuarios_es
where
nombre='".$_POST["nombre"]."'";
$res=mysql_query($sql,$con);

if(mysql_num_rows($res)==0)
{
echo "<script type='text/javascript'>
alert('El usuario ".$_POST["nombre"]." no existe en la base de datos');
window.location='index.php';
</script>";
}
else
{ //************************************************** *********
// Ahora preguntamos si el login y password coniciden en la
// base de datos.

$consulta="select*from usuarios_es
where
nombre='".$_POST["nombre"]."'
and
password='".$_POST["password"]."'";
$resultado=mysql_query($consulta,$con);
if(mysql_num_rows($resultado)==0)
{
echo "<script type='text/javascript'>
alert('El usuario y el password ingresados no coinciden');
window.location='index.php';
</script>";
}
else
{
echo "<script type='text/javascript'>
alert('Bienvenido al sistema de gestion academica Helena, presione aceptar para ser redireccionado.');
window.location='/students/index.php';
</script>";
}
//************************************************** *********
}
?>

Nota: cuando quito la validación usando las funciones .js y reemplazo button por submit, me funciona todo, compruebo que los datos enviados por POST llegan al script php y funciona.

el script funciones.js esta aparte del index.php y del login_es.php lo que hago es llamar el script funciones.js desde el head del archivo index.php así:
<script type="text/javascript" languaje="javascript" src="js/funciones.js"></script>

¿Qué puede estar sucediendo?

Ah si hay errores en lo que he hecho como siempre por favor corrijanme.

[ylellan]

Te recomiendo mejor que uses jquery es muy sencillo y se ve muy elegante, si gustas pasama tu correo y te paso uno sencillo que tengo

[posman]

Hay varias cosas con las funciones javascript.

Código javascript:

if(form.nombre.value==0)
...
if(form.password.value==0)
...
if(ok1==true && ok2==true)
{ window.location='login_es.php'; }
 

Estas revisando de manera incorrecta si un INPUT esta vacio. Debe ser

Código javascript:

if(form.nombre.value.length == 0)
 

igual para la contraseña.

Para ok1 y ok2, si en una variable esperas datos de tipo boolean, no es necesario compararlos contra true o false. Basta con hacer

Código javascript:

if ( ok1 && ok2 )
 

Por ultimo, si redireccionas la pagina con windows.location, no se va a enviar ningun dato que se haya escrito en la forma. Para que se envien los datos tendrias que hacer un submit a la forma

Código javascript:

var form=document.form;
...
if ( ok1 && ok2 ) {
  form.submit();
}
 

[johhan16]

Iniciado por ylellan

Te recomiendo mejor que uses jquery es muy sencillo y se ve muy elegante, si gustas pasama tu correo y te paso uno sencillo que tengo

yo creo que es mejor que coloques aqui el codigo, asi todos pueden verlo

[ylellan]

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:

$(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

[ylellan]

y el jquery.js busquendo q es muy grande el codigo como para postearlo

y las imagenes no se como enviarlas