validar campos vacios, continua de pagina

fcosun · #1 (**permalink**) 28/03/2012, 13:51

Estoy tratando de validar ingresos con javascript.

Si no se ingresa nada en el formulario, al presionar el botón no debiera continuar con la pagina, pero si lo hace.

PHP con Javascript

Acá tengo un vídeo en flash para que lo vean
http://sunsalt.netai.net/files/validacion_sigue.htm

acá tengo la pagina toda esta en html:

Código HTML:

Ver original<script> 
function comprobar(){
    var mal=false; 
    
    numero=document.forms[0].elements.length; 
    
    for(a=0;a<numero;a++){ 
        if (document.forms[0].elements[a].value==""){
            document.forms[0].elements[a].style.backgroundColor="#ffffcc";
            mal=true;
        } 
        else{
            document.forms[0].elements[a].style.backgroundColor="white";
        } 
    } 
    
    if(mal){
        alert("Por favor, rellene las cajas coloreadas");
    } 
        else{document.forms[0].submit()} 
    } 
</script> 
 
 
 
<form action="ingresar1.php" method="post">
  <p>&nbsp;</p>
  <table width="330" border="0" cellspacing="3" cellpadding="3">
    <tr>
      <th width="94" scope="col">&nbsp;</th>
      <th width="223" scope="col">&nbsp;</th>
    </tr>
    <tr>
      <td>Nick:</td>
      <td><input type="text" name="textnick"></td>
    </tr>
    <tr>
      <td>Clave:</td>
      <td><input type="text" name="txtclave1"></td>
    </tr>
    <tr>
      <td>Repetir clave :</td>
      <td><input type="text" name="txtclave2"></td>
    </tr>
    <tr>
      <td>Nivel:</td>
      <td><select name="select">
        <option value="1">Basico</option>
        <option value="2">Admin</option>
      </select></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="Submit" onclick="comprobar()" value="Ingresar"></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</form>

emprear · #2 (**permalink**) 28/03/2012, 17:21

Sin entrar a analizar detalles de la validación, que no es correcta (podrían pasarte espacios en blanco en los campos y validaría correctamente, consultá como hacer trim() con javascript). El método que estás usando para llamar la función, no es el indicado
Lee
http://www.forosdelweb.com/f13/docum...0/#post4151210

tendrías que tener algo como esto

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 
<script> 
function comprobar(){
    var mal=false; 
    
    numero=document.forms[0].elements.length; 
    
    for(a=0;a<numero;a++){ 
        if (document.forms[0].elements[a].value==""){
            document.forms[0].elements[a].style.backgroundColor="#ffffcc";
            mal=true;
        } 
        else{
            document.forms[0].elements[a].style.backgroundColor="white";
        } 
    } 
    
    if(mal){
        alert("Por favor, rellene las cajas coloreadas");
        return false;
    } 
        else{document.forms[0].submit()} 
    } 
</script>
 
</head>
<body>
 
 
 
 
 
<form action="ingresar1.php" method="post" onsubmit="return comprobar();" >
  <p>&nbsp;</p>
  <table width="330" border="0" cellspacing="3" cellpadding="3">
    <tr>
      <th width="94" scope="col">&nbsp;</th>
      <th width="223" scope="col">&nbsp;</th>
    </tr>
    <tr>
      <td>Nick:</td>
      <td><input type="text" name="textnick"></td>
    </tr>
    <tr>
      <td>Clave:</td>
      <td><input type="text" name="txtclave1"></td>
    </tr>
    <tr>
      <td>Repetir clave :</td>
      <td><input type="text" name="txtclave2"></td>
    </tr>
    <tr>
      <td>Nivel:</td>
      <td><select name="select">
        <option value="1">Basico</option>
        <option value="2">Admin</option>
      </select></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="Submit" value="Ingresar"></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</form>
 
 
</body>
</html>

Saludos