[SOLUCIONADO] Validar campos en formulario

[anju_81]

Buenas

Tengo un formulario en HTML, con función PHP, necesito que cuando le doy al botón enviar verifique los campos y en caso de no estar relleno que muestre un mensaje diciendo: El campo "nombre" necesita rellenarse. El código que tengo es:

HTML:

<script>
function revisar() {
if(formulario.nombre == "") { alert('Rellene el nombre') ; return false ; }
if(formulario.poblacion == "") { alert('Rellene la población') ; return false ; }
if(formulario.email == "") { alert('Debes indicar un e-mail') ; return false ; }
if(formulario.telefono == "") { alert('Rellene un teléfono de contacto') ; return false ; }

}
</script>
<td width="439" valign="top"><form method="post" name="contact" enctype="multipart/form-data" action="mailform.php">
<table width="437" border="0">
<tr>
<td>
<label for="author">Nombre:</label>

</td>
<td colspan="2"><input name="nombre" type="text" id="nombre" value="" size="30" />
*</td>
</tr>
<tr>
<td>
<label for="author">Dirección:</label>
</td>
<td colspan="2"><input name="direccion" type="text" id="direccion" value="" size="40" /></td>
</tr>
<tr>
<td>
<label for="author2">Población:</label>
</td>
<td colspan="2"><input name="poblacion" type="text" id="poblacion" value="" size="30" />
*</td>
</tr>
<tr>
<td>
<label for="author">Email:</label>
</td>
<td colspan="2"><input name="email" type="text" id="email" value="" size="30" />
*</td>
<tr>
<td><label for="author3">Teléfono:</label>
</td>
<td colspan="2"><input name="telefono" type="text" id="telefono" value="" size="15" />
*</td>
</tr>

<tr>
<td><label for="author4">Asunto:</label>
</td>
<td colspan="2"><input name="asunto" type="text" id="asunto" value="" size="30" /></td>
</tr>
<tr>
<td colspan="3">
<label for="text2">Mensaje:</label></td>
</tr>
<tr>
<td colspan="3">
<textarea id="mensaje" name="mensaje" rows="9" cols="45" class="required"></textarea>
</td>
</tr>
<tr>
<td colspan="3">Adjunte su logotipo en formato JPG que no pese más de 1 MB</td>
</tr>
<tr>
<td colspan="3"><p>
<input type="file" name="archivo"/>
</p></td>
</tr>
<tr>
<td colspan="3" align="center">DATOS DE INTERÉS PARA REALIZAR PRESUPUESTOS</td>
</tr>
<tr>
<td><label for="diseno">Diseño:</label>
</td>
<td colspan="2"><input name="diseno" type="text" id="diseno" value="Adjuntar logo" size="40" /></td>
</tr>
<tr>
<td><label for="soporte">Soporte:</label>
</td>
<td colspan="2"><input name="soporte" type="text" id="soporte" value="Camisetas, polos, sudaderas, etc." size="40" /></td>
</tr>
<tr>
<td><label for="donde">Dónde se coloca:</label>
</td>
<td colspan="2"><input name="donde" type="text" id="donde" value="Pecho, espalda, frente, etc." size="40" /></td>
</tr>
<tr>
<td><label for="cantidad">Cantidad aprox.:</label></td>
<td colspan="2"><input name="cantidad" type="text" id="cantidad" size="40" /></td>
</tr>

<tr>
<td width="99">
<input type="submit" value="Enviar" id="enviar" name="enviar" class="submit_btn float_l" onsubmit="return revisar()"/></td>
<td width="142">2</td>
<td width="182" align="left"><input type="reset" value="Borrar" id="reset" name="reset" class="submit_btn float_r" /></td>
</tr>
<tr>
<td colspan="3" align="center"><strong><em>* Campos Obligatorios</em></strong></td>
</tr>
</table>
</form></td>

En el PHP no tengo nada que tenga que ver con este tema

Espero vuestra respuesta y gracias...

[caricatos]

Hola:

En principio el evento se debe asociar al formulario (tag form), y no al botón...

Saludos :arriba.

[anju_81]

Iniciado por caricatos

Hola:

En principio el evento se debe asociar al formulario (tag form), y no al botón...

Saludos :arriba.

Hola,

ya lo he modificado y sigue sin salir ningún mensaje que me indique que debo rellenar esos campos...!

<script>
function revisar() {
if (nombre == "") { alert("Rellene el nombre") ; return false ; }
if (poblacion == "") { alert('Rellene la población') ; return false ; }
if (email == "") { alert('Debes indicar un e-mail') ; return false ; }
if (telefono == "") { alert('Rellene un teléfono de contacto') ; return false ; }
}
</script>

<td width="439" valign="top"><form method="post" onsubmit="revisar()" name="contact" enctype="multipart/form-data" action="mailform.php">
<table width="437" border="0">
<tr>
<td>
<label for="author">Nombre:</label>

</td>
<td colspan="2"><input name="nombre" type="text" id="nombre" value="" size="30" />
*</td>
</tr>
<tr>
<td>
<label for="author">Dirección:</label>
</td>
<td colspan="2"><input name="direccion" type="text" id="direccion" value="" size="40" /></td>
</tr>

a ver si me puede echar una mano...gracias

[Alexis88]

Hazle caso a caricatos:

Código Javascript:

var formulario = document.contact, //Tomo el formulario
    cantidad = formulario.elements.length, //Obtengo la cantidad de elementos
    valido = true; //Comodín para saber si todos los campos están completos
 
//Añado al formulario el evento "submit" que es el que se ejecuta cuando lo enviamos
formulario.addEventListener("submit", function(eventoSubmit){
    eventoSubmit.preventDefault(); //Evito que se envíe el formulario sin validar
 
    //Recorro el formulario en búsqueda de campos incompletos
    for (i = 0; i < cantidad; i++){
        //Si el campo es incompleto
        if (!formulario.elements[i].value.length){ 
            //Lanzo una alerta
            alert("Ingrese datos en el campo '" + formulario.elements[i].id + "'");
 
            //Le doy el enfoque a dicho elemento
            formulario.elements[i].focus();
 
            //El comodín cambia su valor a "false" para no enviar el formulario
            valido = false;
 
            //Salgo del bucle For
            break;
        }
    }
  
    if (valido) //Si mi comodín sigue como "true" (si todos los campos tienen datos)
        formulario.submit(); //Lo envío para su procesamiento
}, false);
 

La explicación te la detallé en los comentarios que añadí, saludos.

[anju_81]

Iniciado por Alexis88

Hazle caso a caricatos:

Código Javascript:

var formulario = document.contact, //Tomo el formulario
    cantidad = formulario.elements.length, //Obtengo la cantidad de elementos
    valido = true; //Comodín para saber si todos los campos están completos
 
//Añado al formulario el evento "submit" que es el que se ejecuta cuando lo enviamos
formulario.addEventListener("submit", function(eventoSubmit){
    eventoSubmit.preventDefault(); //Evito que se envíe el formulario sin validar
 
    //Recorro el formulario en búsqueda de campos incompletos
    for (i = 0; i < cantidad; i++){
        //Si el campo es incompleto
        if (!formulario.elements[i].value.length){ 
            //Lanzo una alerta
            alert("Ingrese datos en el campo '" + formulario.elements[i].id + "'");
 
            //Le doy el enfoque a dicho elemento
            formulario.elements[i].focus();
 
            //El comodín cambia su valor a "false" para no enviar el formulario
            valido = false;
 
            //Salgo del bucle For
            break;
        }
    }
  
    if (valido) //Si mi comodín sigue como "true" (si todos los campos tienen datos)
        formulario.submit(); //Lo envío para su procesamiento
}, false);
 

La explicación te la detallé en los comentarios que añadí, saludos.

-----
Hola entonces que debo poner en el script:

<script>
function revisar() {
var formulario = document.contact, //Tomo el formulario
cantidad = formulario.elements.length, //Obtengo la cantidad de elementos
valido = true; //Comodín para saber si todos los campos están completos

//Añado al formulario el evento "submit" que es el que se ejecuta cuando lo enviamos
formulario.addEventListener("submit", function(eventoSubmit){
eventoSubmit.preventDefault(); //Evito que se envíe el formulario sin validar

//Recorro el formulario en búsqueda de campos incompletos
for (i = 0; i < cantidad; i++){
//Si el campo es incompleto
if (!formulario.elements[i].value.length){
//Lanzo una alerta
alert("Ingrese datos en el campo '" + formulario.elements[i].id + "'");

//Le doy el enfoque a dicho elemento
formulario.elements[i].focus();

//El comodín cambia su valor a "false" para no enviar el formulario
valido = false;

//Salgo del bucle For
break;
}
}

if (valido) //Si mi comodín sigue con el valor "true" (si todos los campos tienen datos)
formulario.submit(); //Lo envío para su procesamiento
}, false);
}
</script>
Y luego en la etiqueta <form>
<form method="post" onsubmit="revisar()" name="contact" enctype="multipart/form-data" action="mailform.php">
GRACIAS DE ANTEMANO!!!!

[Alexis88]

Olvídate de la función revisar(), coloca directamente ese código tal y como lo puse, además, quita el onsubmit="revisar()" de la etiqueta form. Analiza el código que te pasé, para eso le puse comentarios, no te limites a copiarlo y pegarlo.

Por favor, utiliza el highlight respectivo para mostrar código.

Saludos

[anju_81]

Código HTML:

<script language="JavaScript">
 function formulariodecontacto(){  
  if (document.formulario.nombre.value==""){ 
   alert("Por favor ingresa tu Nombre."); 
   document.formulario.nombre.select();
   return false;
  } 
   if (document.formulario.poblacion.value==""){ 
   alert("Por favor indique su dirección."); 
   document.formulario.poblacion.select();
   return false;
  } 
   if (document.formulario.email.value==""){ 
   alert("Por favor rellene el correo electrónico."); 
   document.formulario.email.select();
   return false;
  } 
   if (document.formulario.telefono.value==""){ 
   alert("Por favor ingresa su teléfono de contacto."); 
   document.formulario.telefono.select();
   return false;
  } 
  return true;
 }
 
</script>
                                        
            <td width="439" valign="top"><form method="post" name="formulario" enctype="multipart/form-data" action="mailform.php" onSubmit="return formulariodecontacto()">
 

Realmente lo he solucionado de esta forma...lo dejo para que otro le de uso...muchas gracias de todas formas por vuestro tiempo

[Alexis88]

Es una forma válida, aunque muy poco adaptable para otros formularios, pues si tengo más o menos campos, tendré que añadir o quitar líneas de código. La forma que te propuse, se adapta casi a cualquier formulario, pero en fin.

Acostúmbrate a manejar los eventos desde JS, ya no se recomienda hacerlo mediante los atributos de los elementos.

Saludos