Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Validar checkbox

Estas en el tema de Validar checkbox en el foro de Javascript en Foros del Web. Buenos días, Igual mi pregunta parece reiterativa, ya que he visto varios posts con este tema, pero no he conseguido solucionarlo a pesar de haberme ...
  #1 (permalink)  
Antiguo 21/10/2014, 03:38
 
Fecha de Ingreso: julio-2007
Mensajes: 7
Antigüedad: 16 años, 9 meses
Puntos: 0
Validar checkbox

Buenos días,
Igual mi pregunta parece reiterativa, ya que he visto varios posts con este tema, pero no he conseguido solucionarlo a pesar de haberme leído todos.

El caso es que tengo una web hecha con wordpress, y quiero añadir un checkbox para aceptar la política de privacidad. El checkbox lo pongo sin problema, pero no sé cómo hacer para que no se pueda enviar el formulario sin haber aceptado. En un formulario hecho desde 0 no hubiese tenido problema, pero mi nivel de php/javascript no llega para poder modificar el código que ya está hecho en la plantilla.

Esto es lo que tengo:

<div class="contact_form">
<h5><?php if($qode_options_proya['contact_heading_above'] != "") { echo $qode_options_proya['contact_heading_above']; } else { ?><?php _e('', 'qode'); ?><?php } ?></h5>
<form id="contact-form" method="post" action="">
<div class="two_columns_50_50 clearfix">
<div class="column1">
<div class="column_inner">
<input type="text" class="requiredField" name="fname" id="fname" value="" placeholder="<?php _e('Nom *', 'qode'); ?>" />
</div>
</div>
<div class="column2">
<div class="column_inner">
<input type="text" class="requiredField" name="lname" id="lname" value="" placeholder="<?php _e('Cognom *', 'qode'); ?>" />
</div>
</div>
</div>
<?php if ($hide_contact_form_website == "yes") { ?>
<input type="text" class="requiredField email" name="email" id="email" value="" placeholder="<?php _e('a/e *', 'qode'); ?>" />
<input type="hidden" name="website" id="website" value="" />
<?php } else { ?>
<div class="two_columns_50_50 clearfix">
<div class="column1">
<div class="column_inner">
<input type="text" class="requiredField email" name="email" id="email" value="" placeholder="<?php _e('a/e *', 'qode'); ?>" />
</div>
</div>
<div class="column2">
<div class="column_inner">
<input type="text" name="website" id="website" value="" placeholder="<?php _e('Pàgina web', 'qode'); ?>" />
</div>
</div>
</div>
<?php }?>
<textarea name="message" id="message" rows="10" placeholder="<?php _e('Missatge', 'qode'); ?>"></textarea>
<input type="checkbox" name="termin" value="1" id="termin"/>Accepto la política de privacitat​

<span class="submit_button_contact">
<input class="qbutton" type="submit" value="<?php _e('Envia', 'qode'); ?>" />
</span>
</form>
</div>


Y este sería el script:
<script type="text/javascript">
jQuery(document).ready(function($){
$j('form#contact-form').submit(function(){
$j('form#contact-form .contact-error').remove();
var hasError = false;
$j('form#contact-form .requiredField').each(function() {
if(jQuery.trim($j(this).val()) == '' || jQuery.trim($j(this).val()) == jQuery.trim($j(this).attr('placeholder'))){
var labelText = $j(this).prev('label').text();
$j(this).parent().append('<strong class="contact-error"><?php _e('Aquest és un camp requerit', 'qode'); ?></strong>');
$j(this).addClass('inputError');
hasError = true;
} else { //else 1
if($j(this).hasClass('email')) { //if hasClass('email')
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($j(this).val()))){
var labelText = $j(this).prev('label').text();
$j(this).parent().append('<strong class="contact-error"><?php _e('Introduïu una adreça de correu electrònic vàlida.', 'qode'); ?></strong>');
$j(this).addClass('inputError');
hasError = true;
}
} //end of if hasClass('email')

} // end of else 1


}); //end of each()

if(!hasError){
challengeField = $j("input#recaptcha_challenge_field").val();
responseField = $j("input#recaptcha_response_field").val();
name = $j("input#fname").val();
lastname = $j("input#lname").val();
email = $j("input#email").val();
website = $j("input#website").val();
message = $j("textarea#message").val();

var form_post_data = "";

var html = $j.ajax({
type: "POST",
url: "<?php echo QODE_ROOT; ?>/includes/ajax_mail.php",
data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField + "&name=" + name + "&lastname=" + lastname + "&email=" + email + "&website=" + website + "&message=" + message ,
async: false
}).responseText;



if(html == "success"){
var formInput = $j(this).serialize();

$j("form#contact-form").before('<div class="contact-success"><strong><?php _e('GRÀCIES', 'qode'); ?></strong><p><?php _e('El teu email ha estat enviat amb èxit. Ens posarem en contacte amb tu el més aviat possible.', 'qode'); ?></p></div>');
$j("form#contact-form").hide();
$j.post($j(this).attr('action'),formInput);
hasError = false;
return false;
} else {
<?php
if ($qode_options_proya['use_recaptcha'] == "yes"){
?>
$j("#recaptcha_response_field").parent().append('< span class="contact-error extra-padding"><?php _e('Captcha Invàlid', 'qode'); ?></span>');
Recaptcha.reload();
<?php
} else {
?>
$j("form#contact-form").before('<div class="contact-success"><strong><?php _e("Problema al servidor de correu electrònic", 'qode'); ?></strong></p></div>');
<?php
}
?>
return false;
}
}
return false;
});
});
</script>



Alguien me podría ayudar??
Gracias!!
  #2 (permalink)  
Antiguo 21/10/2014, 05:55
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 12 años, 5 meses
Puntos: 51
Respuesta: Validar checkbox

Hola @enita , está el código todo ahí junto...que parece un gazpacho...jejejeje
Pero te digo cómo resolverlo.
En el script, dentro de la función $j('form#contact-form').submit(function() lo que debes hacer es comprobar si el input checkbox está o no seleccionado. Si está seleccionado, detienes el envío del formulario con e.preventDefault();
Quedaría algo como:

Código Javascript:
Ver original
  1. $j('form#contact-form').submit(function(e){
  2.      .
  3.      .
  4.      .
  5.      if( document.getElementById("termin").checked ){
  6.         e.preventDefault();
  7.      }
  8. }
__________________
Diseño Web Jaén
  #3 (permalink)  
Antiguo 21/10/2014, 08:14
 
Fecha de Ingreso: julio-2007
Mensajes: 7
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Validar checkbox

Muchas gracias!
Pero lo que necesito es lo contrario, que si el checkbox NO está seleccionado, de detenga el envío y salga un mensaje de "debes aceptar las condiciones blabla..", y si SÍ está seleccionado, se envíe el formulario. Me viene un poco grande esto :(
  #4 (permalink)  
Antiguo 21/10/2014, 08:44
Avatar de dAvidcA  
Fecha de Ingreso: septiembre-2009
Ubicación: /home/dev/
Mensajes: 73
Antigüedad: 14 años, 7 meses
Puntos: 7
Respuesta: Validar checkbox

Hola enita, para ese caso utilizas el código de garciasanchezdani pero negando la condición del checkbox, así:

Código Javascript:
Ver original
  1. $j('form#contact-form').submit(function(e){
  2.      .
  3.      .
  4.      .
  5.      if( !document.getElementById("termin").checked ){
  6.         e.preventDefault();
  7.      }
  8. }
  #5 (permalink)  
Antiguo 21/10/2014, 08:50
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 12 años, 5 meses
Puntos: 51
Respuesta: Validar checkbox

Cita:
Iniciado por dAvidcA Ver Mensaje
Hola enita, para ese caso utilizas el código de garciasanchezdani pero negando la condición del checkbox, así:

Código Javascript:
Ver original
  1. $j('form#contact-form').submit(function(e){
  2.      .
  3.      .
  4.      .
  5.      if( !document.getElementById("termin").checked ){
  6.         e.preventDefault();
  7.      }
  8. }
Eso es. Disculpa que fue error mío
__________________
Diseño Web Jaén
  #6 (permalink)  
Antiguo 21/10/2014, 13:07
 
Fecha de Ingreso: julio-2007
Mensajes: 7
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Validar checkbox

Muchas gracias a los dos ;)
Al final era un poco más complicado (para mí, que no tengo ni idea), el código que he tenido que añadir es este:

var $fields = $(this).find('input[name="acepto"]:checked');
if (!$fields.length) {
$j(this).parent().append("<strong class='contact-error'><?php _e('Tiene que aceptar la política de privacidad', 'qode'); ?></strong>");
$j(this).addClass('inputError');
hasError = true;
}

Ea, solucionado! Gracias otra vez!!!

Etiquetas: ajax, checkbox, formulario, html, input, jquery, php
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 12:17.