Chequear campos

[braiank]

como puedo chequear que todos los campos de un formulario esten llenos con javascript, osea sin procesar nada, que al tocar el input de OK si hay un input vacio que salte el ALERT.

alguien tiene idea?

[Kelpie]

Aquí tienes una manera básica:

En primer lugar, tu form debería tener un nombre...

Código:

<form id="form01" action="....

Luego, un pequeño script que compruebe los campos...

Código:

<script>
function manda(que){
  //Un chequeo r&aacute;pido de campos
  var obj=window.document.getElementById(que);
  var msg="";
  var objSel;
  if (obj.nombre_campo_1.value==""){
	msg+="   - Debe indicar el campo 1\n";
	objSel=obj.nombre_campo_1;
  }
  if (obj.nombre_campo_2.value==""){
	msg+="   - Debe indicar el campo 2\n";
	if (!objSel) objSel=obj.nombre_campo_2;
  }
  //etc con todos los campos

  if (msg!=""){
    msg="Revise en el formulario los campos vacíos, por favor:\n"+msg;
	alert (msg);
        objSel.focus();
    }else{
	obj.submit();
    }
  }
}
</script>

Luego, el botón submit se pone como button:

Código:

<input type="button" value="Enviar" onClick="manda('form01');">

O algo parecido..

Si te das una vuelta por este Post podrás ver una manera más profesional de hacerlo.

[braiank]

la funcion la puse asi :

Código PHP:

  function manda(que)
{
  //Un chequeo rápido de campos
  var obj=window.document.getElementById(que);
  var msg="";
  var objSel;
  if (obj.name.value==""){
    msg+="   - Debe ingresar un nombre\n";
    objSel=obj.name;
  }
  if (obj.email.value==""){
    msg+="   - Debe ingresar un e-mail\n";
    if (!objSel) objSel=obj.email;
  }
  //etc con todos los campos
 
  if (msg!=""){
    msg="Revise en el formulario los campos vacíos, por favor:\n"+msg;
    alert (msg);
        objSel.focus();
    }else{
    obj.submit();
    }
  }
} 
   

y el formulario

Código PHP:

  <?
   function forme() 
   { 
?>
        <form id="form01" action="index.php?a=contacto"> 
        <center>
        <br><br>
        <table border=0>
        <tr class=b><td width=90>Nombre</td> <td><input type="text" name="name"></td></tr>
        <tr class=b><td width=90>Tu E-Mail</td> <td><input type="text" name="email"></td></tr>
        <tr class=b><td width=90>Mensaje</td> <td><textarea name='mensaje' cols='35' rows='10' onKeyUp="return maximaLongitud(this,249)"></textarea></td></tr>
        <input type="hidden" name="cantidad" value="3"> 
        </table>
        <br><input type="button" value="OK" onClick="manda('form01');">
        </form>
</center>
<?
   }
?>   

pero cuando toco en el boton OK no hace nada

Saludos

[zyon]

intenta colocar un

try y catch a las variables o por bloques y tal vez encuentres donde esta el pronblema, la menot no ayudarte mas pero solo visite de a rapido la pagina, saludos y suerte!!!

[derkenuke]

Quizás sea porque estás haciendo:

Código PHP:

  obj.name.value 
   

Y normalmente name suele ser un atributo directo, una propiedad de un campo, luego lo solemos tomar como palabra reservada...

Un saludo.

[zyon]

habia notado esa linea, pero realmente el JS es un miundo de posibilidades y no se que onda con esa linea de código, aunque sigo sin saber como se pdria arreglar eso... :S

[derkenuke]

Por ejemplo dándole otro nombre al campo se podría solventar. He notado complicaciones entre navegadores:

Código PHP:

  <form name="formulario">
    <input type="text" name="name" value="hola" />
    <button onclick="
        alert('document.formulario[\'name\'].value = '+document.formulario['name'].value);
        alert('document.formulario.name.value = '+document.formulario.name.value);
        alert('document.formulario.getAttribute(\'name\') = '+document.formulario.getAttribute('name') );
        alert('document.formulario.getAttribute(\'name\').value = '+document.formulario.getAttribute('name').value );
        alert('document.formulario.getAttributeNode(\'name\').nodeValue = '+document.formulario.getAttributeNode('name').nodeValue );
    ">datos</button>
</form> 
   

Resulta que en IE document.formulario.getAttribute("name") nos devuelve el campo (incorrectamente), y en FF el atributo (como debería ser).

Sólo con getAttributeNode devuelven los dos el atributo. Con lo demás (["name"] y .name) devuelven los dos el campo.

Pero no recomendaría llamar name a un campo
Para hallar el valor del atributo name del campo name habría que escribir algo tan feo como esto:
document.formulario.name.name


Un saludo.

[braiank]

ahora lo tengo asi :

Código PHP:

  function manda(que)
{
  //Un chequeo rápido de campos
  var obj=window.document.getElementById(que);
  var msg="";
  var objSel;
  if (obj.nombre.value==""){
    msg+="   - Debe ingresar un nombre\n";
    objSel=obj.nombre;
  }
  if (obj.email.value==""){
    msg+="   - Debe ingresar un e-mail\n";
    if (!objSel) objSel=obj.email;
  }
  //etc con todos los campos
 
  if (msg!=""){
    msg="Revise en el formulario los campos vacíos, por favor:\n"+msg;
    alert (msg);
        objSel.focus();
    }else{
    obj.submit();
    }
  }
} 
   

Código PHP:

  <?
   function forme() 
   { 
?>
        <form id="form01" action="index.php?a=contacto"> 
        <center>
        <br><br>
        <table border=0>
        <tr class=b><td width=90>Nombre</td> <td><input type="text" name="nombre"></td></tr>
        <tr class=b><td width=90>Tu E-Mail</td> <td><input type="text" name="email"></td></tr>
        <tr class=b><td width=90>Mensaje</td> <td><textarea name='mensaje' cols='35' rows='10' onKeyUp="return maximaLongitud(this,249)"></textarea></td></tr>
        <input type="hidden" name="cantidad" value="3"> 
        </table>
        <br><input type="button" value="OK" onClick="manda('form01');">
        </form>
</center>
<?
   }
?>   

y pasa igual

[derkenuke]

No entiendo, a mi este código me funciona muy bien en IE6 y FF2:

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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
 
</style>
</head>
 
<body>
 
 
 
        <form id="form01" action="index.php?a=contacto"> 
        <center>
        <br><br>
        <table border=0>
        <tr class=b><td width=90>Nombre</td> <td><input type="text" name="nombre"></td></tr>
        <tr class=b><td width=90>Tu E-Mail</td> <td><input type="text" name="email"></td></tr>
        <tr class=b><td width=90>Mensaje</td> <td><textarea name='mensaje' cols='35' rows='10' onKeyUp="return maximaLongitud(this,249)"></textarea></td></tr>
        <input type="hidden" name="cantidad" value="3"> 
        </table>
        <br><input type="button" value="OK" onClick="manda('form01');">
        </form> 
 
 
 
<script type="text/javascript">
 
function manda(que) {
    //Un chequeo r&aacute;pido de campos
    var obj=window.document.getElementById(que);
    var msg="";
    var objSel;
    if (obj.nombre.value==""){
        msg+="   - Debe ingresar un nombre\n";
        objSel=obj.nombre;
    }
    if (obj.email.value==""){
        msg+="   - Debe ingresar un e-mail\n";
        if (!objSel) objSel=obj.email;
    }
    //etc con todos los campos
 
    if (msg!=""){
        msg="Revise en el formulario los campos vacíos, por favor:\n"+msg;
        alert (msg);
        objSel.focus();
    }else{
        obj.submit();
    }
}  
 
 
 
</script>
 
</body>
</html> 
  

Quizás tengas algo sobreescribiendo la función manda()....

De todas maneras para validar un form no se le suele dar id, se le suele dar un name y trabajar con document.forms["nombreDeFormulario"] más cómodamente.

O llevarlo más allá y pasarle el objeto formulario directamente a la función como parámetro.

También tienes que tener en cuenta a los usuarios que tengan el javascript desactivado, no podrán enviar tu formulario.

¿No te marca ningún error? Sobra una llave al final del código, es un poco difícil llevar control de las llaves si no identamos (aunque quizá sea porque cogiste un pedazo de código y no te diste cuenta).

Un saludo.