Foros del Web » Programando para Internet » Javascript »

Validar campo checkbox en fomulario html

Estas en el tema de Validar campo checkbox en fomulario html en el foro de Javascript en Foros del Web. Buenas tardes, en primer lugar decir que soy novato y llego poquito en esto y dar las gracias por vuestra atención. Tengo hecho un formulario ...
  #1 (permalink)  
Antiguo 12/01/2015, 12:34
 
Fecha de Ingreso: enero-2015
Mensajes: 5
Antigüedad: 9 años, 3 meses
Puntos: 0
Información Validar campo checkbox en fomulario html

Buenas tardes, en primer lugar decir que soy novato y llego poquito en esto y dar las gracias por vuestra atención.
Tengo hecho un formulario de contacto en html que envía el contenido a una página php para que envíe un correo a la dirección indicada. El problema está en el campo checkbox, no tengo ni la más remota idea de como hacer que esta información sólo se envíe cuando este marcado. Por el momento se envía siempre, esté o no marcado.
Ya he consultado mucha documentación en el foro pero no doy con la solución.

Seguramente el código no esté muy claro pero aquí lo dejo.

formulario.html contiente el siguiente código:
<html>
<head>
<title>Formulario de contacto</title>
</head>
<body>
<form action="val_form_contacto.php" method="post">
<br />
<label for="nombre"><span style="color:#ffff00;"><strong>SOLICITO INFORMACIÓN</strong></span><br />
<br />Nombre:</label> <input id="nombre" maxlength="50" name="nombre" placeholder="" required="" size="40" type="text" /><br />
<label for="email">Email:</label> <input id="email" maxlength="50" name="email" placeholder="" required="" size="40" type="text" /><br />
<label for="telefono">Teléfono:</label> <input id="telefono" maxlength="9" name="telefono" placeholder="" required="" size="20" type="text" /><br />
<label for="mensaje">Mensaje:</label>
<p>
<textarea cols="40" id="mensaje" name="mensaje" placeholder="" required="" rows="4"></textarea><br />
<label><input name="acepto" type="checkbox" value="checkbox" /></label> Acepto la <a a="" href="http://www.paginaprueba.es/pol-privacidad" name="submit" target="&quot;_blank" type="submit" value="Enviar">política de privacidad</a></p>
<p>
<input id=" submit" name="submit" type="submit" value="Enviar" /></p>
</form>
</body>
</html>

val_form_contacto.php contiene el siguiente código:
<?php
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$telefono = $_POST['telefono'];
$mensaje = $_POST['mensaje'];
$para = '[email protected]';
$titulo = 'SOLICITUD DE INFORMACIÓN';
$header = 'From: ' . $email;
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Telefono: $telefono\n Mensaje:\n $mensaje";

if ($_POST['submit']) {
if (mail($para, $titulo, $msjCorreo, $header)) {
echo "<script language='javascript'>
alert('Sus datos han sido enviados correctamente, en breve nos pondemos en contacto con usted, gracias.');
window.location.href = 'http://www.paginaprueba.es';
</script>";
} else {
echo "<script language='javascript'>
alert('Falló el envio, por favor vuelva a intentarlo en unos minutos.');
window.location.href = 'http://www.paginaprueba.es';
</script>";
//echo 'Falló el envío, por favor vuelva a intentarlo en unos minutos';
}
}
?>

Gracias por su ayuda.
  #2 (permalink)  
Antiguo 12/01/2015, 12:40
 
Fecha de Ingreso: octubre-2014
Ubicación: Buenos Aires
Mensajes: 278
Antigüedad: 9 años, 6 meses
Puntos: 12
Respuesta: Validar campo checkbox en fomulario html

Hola josejimenez9, bienvenido al foro. Cuando postes código usa los Highlight para resaltar el código así de esta manera se entiende mejor.

1º puedes hacer la validación por jquery, en google (validar contact form jquery) tienes miles de ejemplos.

2º en php debes validar que $_POST['acepto'] es igual a "on" u "off", si esta en off no envias el mail.

Espero te sirva, Saludos.
__________________
http://www.sp-vision.net
  #3 (permalink)  
Antiguo 12/01/2015, 13:07
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 1 mes
Puntos: 1284
Respuesta: Validar campo checkbox en fomulario html

Hola:

Cita:
Iniciado por mauritosuarez Ver Mensaje
...puedes hacer la validación por jquery, en google (validar contact form jquery) tienes miles de ejemplos.
...
Para qué cargar toda una librería para una simple validación... si basta con:

onsubmit="return acepto.checked"

En la misma etiqueta form.

Un tuto sobre formularios: El abc de los formularios.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 12/01/2015, 14:27
 
Fecha de Ingreso: abril-2008
Mensajes: 25
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Validar campo checkbox en fomulario html

Prueba con poner
Código PHP:
<input name="acepto" type="checkbox" value="checkbox" required/> 
  #5 (permalink)  
Antiguo 12/01/2015, 16:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 1 mes
Puntos: 1284
Respuesta: Validar campo checkbox en fomulario html

Hola:

Cita:
Iniciado por chachek Ver Mensaje
Código PHP:
<input type="checkbox" ... required/> 
¿Requerir un checkbox...?

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 13/01/2015, 02:47
 
Fecha de Ingreso: enero-2015
Mensajes: 5
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Validar campo checkbox en fomulario html

Buenas a todos. Muchísimas gracias.
Finalmente he utilizado lo que ha sugerido caricatos añadir onsubmit="return acepto.checked" en el form y funciona maravillosamente bien.
Por cierto, también he probado con lo del requiered por curiosidad, como alternativa y no, no funciona.

Mil gracias por vuestra ayuda.
  #7 (permalink)  
Antiguo 13/01/2015, 03:08
 
Fecha de Ingreso: enero-2015
Mensajes: 5
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Validar campo checkbox en fomulario html

Acabo de detectar un problema. La validación de campos nombre, email, mensaje con la etiqueta onsubmit="return acepto.checked" no funciona, escribas o no escribas en esos campos, si marcas el checkbox acepto envía el formulario.
¿Qué puedo añadir o sustituir para validarlo?
Muchas gracias.
  #8 (permalink)  
Antiguo 13/01/2015, 03:59
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 1 mes
Puntos: 1284
Respuesta: Validar campo checkbox en fomulario html

Hola:

Una validación es algo más complejo que chequear un control, o sea que ya sería mejor usar javascript (bueno, la solución también era javascript, pero muy simple)...

He reportado el mensaje para moverlo a ese foro, pero por lo pronto deberías leer el tutorial que referencié antes...

Básicamente deberías dejar en el form algo así: onsubmit="return validar(this)", y en la cabecera de la página poner la función de validación.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 13/01/2015, 06:21
 
Fecha de Ingreso: enero-2015
Mensajes: 5
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Validar campo checkbox en fomulario html

Hola de nuevo,
Caricatos he revisado el enlace y leído y releído sobretodo la parte de validación y checkboxes y otros arrays y no soy capaz de seguirlo del todo.
Sé que tengo que hacer una función para validar que los campos nombre, email, telefono y mensaje y ponerla en el <head></head>, pero no estoy seguro de como hacerla ni de si tengo que incluir el checkbox acepto también o si acepto ya queda validado utilizando el onsubmit="return acepto.checked" pudiendo utilizar 2 onsudmit en el form.
Como ya he dicho soy novato y no controlo todo lo que me gustaría del tema.

Gracias de nuevo por vuestra ayuda.
PD: Muy interesante lo que dice el articulo sobre que es importante validarlo bien para que el visitante no desconfíe. No imaginaba que fuese tan importante.
  #10 (permalink)  
Antiguo 13/01/2015, 07:12
 
Fecha de Ingreso: abril-2008
Mensajes: 25
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Validar campo checkbox en fomulario html

Cita:
Iniciado por caricatos Ver Mensaje
Hola:



¿Requerir un checkbox...?

Saludos
¿hay algún problema con eso?

yo lo uso para controlar que aceptas y que has leido las condiciones y me funcciona, no sé si es una manera incorrecta de programacion (me considero novato)

Saludos
  #11 (permalink)  
Antiguo 13/01/2015, 12:48
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 1 mes
Puntos: 1284
Respuesta: Validar campo checkbox en fomulario html

Hola:

Cita:
Iniciado por josejimenez9 Ver Mensaje
Hola de nuevo,
Caricatos he revisado el enlace y leído y releído sobretodo la parte de validación y checkboxes y otros arrays y no soy capaz de seguirlo del todo.
Sé que tengo que hacer una función para validar que los campos nombre, email, telefono y mensaje y ponerla en el <head></head>, pero no estoy seguro de como hacerla ni de si tengo que incluir el checkbox acepto también o si acepto ya queda validado utilizando el onsubmit="return acepto.checked" pudiendo utilizar 2 onsudmit en el form.
Como ya he dicho soy novato y no controlo todo lo que me gustaría del tema.

Gracias de nuevo por vuestra ayuda.
PD: Muy interesante lo que dice el articulo sobre que es importante validarlo bien para que el visitante no desconfíe. No imaginaba que fuese tan importante.
Básicamente pones en el head:

Código Javascript:
Ver original
  1. function validar(formu) {
  2.  mensajes = [];
  3.  if (!formu.acepto.checked) mensajes.push("Debes aceptar el envío.");
  4.  if (formu.nombre.value == "") mensajes.push("Debes indicar el nombre.")
  5.  // aquí el resto
  6.  if (mensajes.length > 0) alert(mensajes.split("\n"));
  7.  return (mensajes.length == 0);
  8. }

Con ese código se crea un array vacío para mensajes, y por cada error de validación añade al array un mensaje nuevo asociado al error de validación.
Si hay mensajes los muestra (en este caso con una alerta; y pasa la validación si no hay mensajes...

Cita:
Iniciado por chachek Ver Mensaje
¿hay algún problema con eso?

yo lo uso para controlar que aceptas y que has leido las condiciones y me funcciona, no sé si es una manera incorrecta de programacion (me considero novato)

Saludos
Imagínate un checkbox con un label "hablas inglés"...

Si o sí tienes que hablar inglés si la lógica del required funciona...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 13/01/2015, 13:59
 
Fecha de Ingreso: abril-2008
Mensajes: 25
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Validar campo checkbox en fomulario html

Cita:
Iniciado por caricatos Ver Mensaje
Hola:

Imagínate un checkbox con un label "hablas inglés"...

Si o sí tienes que hablar inglés si la lógica del required funciona...

Saludos
Efectivamente un checkbox required en un "¿hablas ingles?"
no tiene sentido en ese caso usaria un radio con el mismo name y distinto value...

Pero en el ejempo que pone el forero josejimenez9 valdría perfectamente ¿no? y lo uso en un form de registro y junto con los pattern`s controlo los errores por el lado del cliente y luego los vuelvo a controlar por el lado del servidor
  #13 (permalink)  
Antiguo 14/01/2015, 10:29
 
Fecha de Ingreso: enero-2015
Mensajes: 5
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Validar campo checkbox en fomulario html

Buenas de nuevo,
Chachek he probado de nueco el requiered="" y funciona en los demás campos pero en el checkbox acepto del código que puse al principio del tema al menos a mí no me funciona.

Caricatos, acabo de probar el código que pasaste ayer y seguro que fallo en algo porque no me termina de funcionar, pego index.html que es el que he editado ya que en val_form_contacto.php no he modificado nada.
index.htm
Código HTML:
Ver original
  1. l
  2. <title>Formulario de contacto</title>
  3. <script language="javascript">
  4. function validar(formu) {
  5.  mensajes = [];
  6.  if (!formu.acepto.checked) mensajes.push("Debes aceptar el envío.");
  7.  if (formu.nombre.value == "") mensajes.push("Debes indicar el nombre.")
  8.  if (formu.email.value == "") mensajes.push("Debes indicar el email.")
  9.  if (formu.telefono.value == "") mensajes.push("Debes indicar el telefono.")
  10.  if (formu.mensaje.value == "") mensajes.push("Debes indicar el mensaje.")
  11.  if (mensajes.length > 0) alert(mensajes.split("\n"));
  12.  return (mensajes.length == 0);
  13. }
  14. </head>
  15. <form  onsubmit="return validar(formu)" action="val_form_contacto.php" method="post">
  16. <br />
  17. <label for="nombre"><span style="color:#ffff00;"><strong>SOLICITO INFORMACIÓN</strong></span><br />
  18. <br />Nombre:</label> <input id="nombre" maxlength="50" name="nombre" placeholder="" required="" size="40" type="text" /><br />
  19. <label for="email">Email:</label> <input id="email" maxlength="50" name="email" placeholder="" required="" size="40" type="text" /><br />
  20. <label for="telefono">Teléfono:</label> <input id="telefono" maxlength="9" name="telefono" placeholder="" required="" size="20" type="text" /><br />
  21. <label for="mensaje">Mensaje:</label>
  22. <p>
  23. <textarea cols="40" id="mensaje" name="mensaje" placeholder="" required="" rows="4"></textarea><br />
  24. <label><input name="acepto" type="checkbox" value="checkbox"/></label> Acepto la <a a="" href="http://www.paginaprueba.es/pol-privacidad" name="submit" target="&quot;_blank" type="submit" value="Enviar">política de privacidad</a></p>
  25. <p>
  26. <input id=" submit" name="submit" type="submit" value="Enviar" /></p>
  27. </form>
  28. </body>
  29. </html>


Gracias de nuevo por toda vuestra ayuda y disculpar la demora.

Etiquetas: checkbox, formulario, html, validacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:28.