script para validar campos en formulario ¿?

GoldFran · #1 (**permalink**) 08/05/2007, 05:45

Buenas, estoy haciendo una aplicacion en PHP y necesito hacer unas cosas en JavaScript y de esto no tengo ni idea...

El caso es que por ejemplo tengo un formulario para dar de alta clientes, y quiero hacer lo siguiente:

- Que no se puedan dejar campos vacios
- Que solo se puedan escribir numeros (para telefono o codigo postal)
- que se escriban como miniomo X caracteres y como maximo Y (para la contraseña por ejemplo)

Alguna ayudita?

ferbux · #2 (**permalink**) 08/05/2007, 09:32

hola, pues puedes hacer algo asi:

function validar(){
if(document.formulario.fini=" ")
alert("Ingrese fecha de inicio");
if(document.formulario.ffin=" ")
alert("Ingrese fecha de terminacion");
if(document.formulario.dep=" ")
alert("Ingrese el numero de pedido");
}

y la mandas llamar asi:

<input type="hidden" name="enviar" value="Enviar">
<input type="Submit" name="enviar" value="Enviar" class=button onclick="validar()">

espero te sirva.

sALUDOS.

GoldFran · #3 (**permalink**) 08/05/2007, 15:46

Cita:

Iniciado por ferbux

hola, pues puedes hacer algo asi:

function validar(){
if(document.formulario.fini=" ")
alert("Ingrese fecha de inicio");
if(document.formulario.ffin=" ")
alert("Ingrese fecha de terminacion");
if(document.formulario.dep=" ")
alert("Ingrese el numero de pedido");
}

y la mandas llamar asi:

<input type="hidden" name="enviar" value="Enviar">
<input type="Submit" name="enviar" value="Enviar" class=button onclick="validar()">

espero te sirva.

sALUDOS.

Perdón por el retraso, es que me queado sin Internet :)

Ante todo gracias. Y otra cosa que quiero preguntar...

Esto como se "llama" desde cada campo?

Es decir, si tengo esto...

Código HTML:

<form id="form1" name="form1" method="post" action="altaclie2.php">
  <label><strong>Empresa</strong>:
  <input name="nombre" type="text" id="nombre" value="Escriba el nombre de su empresa" size="50" maxlength="50" />
  </label>
  <p><strong>CIF: 
    <label>
    <input name="cif" type="text" id="cif" size="9" maxlength="9" />
    </label>
  </strong></p>
  <p><strong>Calle: 
    <label>
    <input name="calle" type="text" id="calle" value="Introduzca el nombre de la calle" size="50" maxlength="50" />
    </label>
  </strong></p>
  <p><strong>N&ordm; / bajo: 
    <label>
    <input name="numero" type="text" id="numero" size="3" maxlength="3" />
    </label>
  </strong></p>
  <p><strong>CP: </strong>
    <label>
    <input name="cp" type="text" id="cp" size="5" maxlength="5" />
    </label>
  </p>
  <p><strong>Provincia: 
    <label> </label>
  </strong>
    <label>
    <select name="prov" size="1" id="prov">
      <?
$db="servtein";

$tabla="provincias";

$sql="SELECT * from $tabla";

$conexion = mysql_connect("localhost", "root");

mysql_select_db($db, $conexion);

$resultado= mysql_query($sql, $conexion);
while($registro=mysql_fetch_row($resultado))
{
?>
      <option value="<? echo $registro[0]; ?>"> <? echo $registro[1]; ?>.
<?
}
?>
    </select>
    </label> 
  (recuerde que se muestran las provincias donde ofrecemos covertura)</p>
  <p><strong>TLF: 
    <label>
    <input name="tlf" type="text" id="tlf" size="9" maxlength="9" />
    </label>
  </strong></p>
  <p><strong>E-Mail 
    <label>
    : 
    <input name="email" type="text" id="email" value="[email protected]" size="50" maxlength="50" />
    </label>
  </strong></p>
  <p>-----------------------------------------</p>
    <p><strong>Usuario: 
    <label>
    <input name="login" type="text" id="login" size="20" maxlength="20">
    </label>
  </strong></p>
  <p><strong>Contrase&ntilde;a: </strong>
    <label>
    <input name="pass" type="password" id="pass" size="25" maxlength="25">
    </label>
  </p>
  <p>
    <input type="submit" name="Submit" value="Enviar">
    <input name="level" type="hidden" id="level" value="1">
  </p>
  <p>
    <label></label>
  </p>
</form>

Tengo que poner el Script arriba de esto, y luego como se aplica en los campos? Es que ya te digo, estoy muy pez en javascript

Gracias

PD: y algo para decir que tenga que introducir minimo un numero de caractétes (para el password)

caricatos · #4 (**permalink**) 09/05/2007, 01:14

Hola:

No es correcta la forma de validar que se plantea, y por cierto, una buena validación debe ser doble, una en javascript, y otra en el server, entre otras cosas por quienes desactivan javascript... pero sobre la validación en el mismo formulario, debe hacerse (hablando de hacerlo bien) desde el evento submit, con una función validadora que devuelva un valor lógico true/false (false cancela el envío)

Como ejemplo contestaré la última pregunta...

Código:

PD: y algo para decir que tenga que introducir minimo un numero de caractétes (para el password)

Código:

<form action="destino.php" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return (pass.value.length > 5)" >
<input type="password" name="pass" />
<button type="submit" >enviar</button>
</form>

Saludos

GoldFran · #5 (**permalink**) 09/05/2007, 02:13

si, pero es que debo ser muy lelo xD

como sabe el script a que campos se aplican las cosas, es decir, en el ejemplo de mi formulario, como sabe el scrip que el campo CP y el campo TLF son solo numericos...

Por otro lado lo de validar directamente tambien en el servidor es muy buena idea, pero bueno como es un proyecto...

libiob · #6 (**permalink**) 19/05/2007, 11:56

Es muy simple, tu disena tu formulario como desees, mientras los campos sean de texto lo nombras en tu script de acuerdo al nombre q das al campo, entre ellos no se deben repetir, ejem:
document.nameform.namecampo.value=""
En tu script solo condicionas, si este es igual a "" vacio mandas una alerta de mensaje indicando lo q debe hacer el usuario.
El caso de campos select, radio, checkbox varian ya que los valores de las variables se detectan de diverso modo, date una vuelta por google y pon validacion de formularios, tendras muchas muestras, aqui un ejemplo muy simple.

Código HTML:

<script>
function validar()
{ 
if (document.nameform.namecampo1.value=="")
   {
   alert('aqui el aviso a mandar');
   document.nameform.namecampo1.focus; // posicionas el puntero en ese campo
   return false;//le dices q no envie nada
   }
}
</script>
<body>
<form name="nameform" action="#"  onsubmit="return validar();">
Entre el nombre = <input type="text" name="namecampo1">
<br>
<input type="submit" name="send" value="Enviar">
</form>
</body>

Fijate q en javascript solo esta validando un campo, lo mismo q el formulario tiene un solo campo, si anades tantos campos al formulario y todos aquellos que quieras validar debe ser nombrado en tu script.
Es muy simple, espero te sirva.

Saludos,

GoldFran · #7 (**permalink**) 04/06/2007, 16:08

Bueno, recojo este hilo porque he hecho el validar para que no me deje campos vacios, pero el problema está en que cuando me deja de decir "no deje campos vacios" el formulario se envía de todas maneras... Que tengo mal?

Código HTML:

<script>
	function validar()
		{
		if (document.form1.nombre.value == "" ) 	alert("No deje campos vacios");
		if (document.form1.cif.value == "" ) 	alert("No deje campos vacios");
		if (document.form1.calle.value == "" ) 	alert("No deje campos vacios");
		if (document.form1.numero.value == "" ) 	alert("No deje campos vacios");
		if (document.form1.cp.value == "" ) 	alert("No deje campos vacios");
		if (document.form1.tlf.value == "" ) 	alert("No deje campos vacios");
		if (document.form1.email.value == "" ) 	alert("No deje campos vacios");
		if (document.form1.login.value == "" ) 	alert("No deje campos vacios");
		if (document.form1.pass.value == "" ) 	alert("No deje campos vacios");
		}
</script>
<style type="text/css">
<!--
body {
	background-image: url(../comp/fondo2.gif);
}
-->
</style>
<link href="../css.css" rel="stylesheet" type="text/css" />
<center>
  <p><strong>Date de alta como nuevo usuario de Servtein y disfruta de sus ventajas</strong>
  </p>
</center>
<table width="75%" border="1" align="center" bgcolor="#FFC4C4">
  <tr>
    <td><form id="form1" name="form1" method="post" action="altaclie2.php" onsubmit="return validar();">
      <label><strong> Empresa</strong>:
        <input name="nombre" type="text" id="nombre" value="Escriba el nombre de su empresa" size="50" maxlength="50" />
      </label>
      <p><strong>CIF:
        <label>
            <input name="cif" type="text" id="cif" size="9" maxlength="9" />
          </label>
      </strong></p>
      <p><strong>Calle:
        <label>
            <input name="calle" type="text" id="calle" value="Introduzca el nombre de la calle" size="50" maxlength="50" />
          </label>
      </strong></p>
      <p><strong>N&ordm; / bajo:
        <label>
            <input name="numero" type="text" id="numero" size="3" maxlength="3" />
          </label>
      </strong></p>
      <p><strong>CP: </strong>
          <label>
          <input name="cp" type="text" id="cp" size="5" maxlength="5" />
          </label>
      </p>
      <p><strong>Provincia:
        <label> </label>
        </strong>
          <label>
          <select name="prov" size="1" id="prov">
            <?
$db="servtein";

$tabla="provincias";

$sql="SELECT * from $tabla";

$conexion = mysql_connect("localhost", "root", "02051250");

mysql_select_db($db, $conexion);

$resultado= mysql_query($sql, $conexion);
while($registro=mysql_fetch_row($resultado))
{
?>
            <option value="<? echo $registro[0]; ?>"> <? echo $registro[1]; ?>.
              <?
}
?>
            </option>
          </select>
          </label>
        (recuerde que se muestran las provincias donde ofrecemos covertura)</p>
      <p><strong>TLF:
        <label>
            <input name="tlf" type="text" id="tlf" size="9" maxlength="9" />
          </label>
      </strong></p>
      <p><strong>E-Mail
        <label> :
          <input name="email" type="text" id="email" value="[email protected]" size="50" maxlength="50" />
          </label>
      </strong></p>
      <p>-----------------------------------------</p>
      <p><strong>Usuario:
        <label>
            <input name="login" type="text" id="login" size="20" maxlength="20" />
          </label>
      </strong></p>
      <p><strong>Contrase&ntilde;a: </strong>
          <label>
          <input name="pass" type="password" id="pass" size="25" maxlength="25" />
          </label>
      </p>
      <p align="center">
        <input type="submit" name="Submit" value="Enviar" />
        <input name="level" type="hidden" id="level" value="1" />
      </p>
      <p>
        <label></label>
      </p>
    </form></td>
  </tr>
</table>