0

Estoy realizando una validación de términos y condiciones en la cual tengo que marcar un checkbox donde dice que acepto términos y luego poder apretar continuar y redirigirme a la nueva pagina.

Lo que pasa es que al momento de probar el checkbox sin marcarlo y darle a continuar me aparece una alerta que debo aceptar los términos a la cual yo le doy siguiente y me redirige a la pagina siguiente sin dejarme marcar el checkbox que necesitaba.

Necesito ayuda con hacer esa validación para que cuando aparezca esta alerta me deje en la misma pagina y tenga que marcar el checkbox antes de poder seguir. Dejo código.

<center>
  <script type="text/javascript">
    function valid() {
      //Validación de campo vacío
      if (document.getElementById("acepto_chk").checked == false) {
        alert("Acepta los terminos");
        document.getElementById("acepto_chk").focus();
        return false;
      }
      return true;
    }
  </script>

  <label>He leído y comprendo los requerimientos &nbsp;</label> 
  <input type="checkbox" name="acepto_chk" id="acepto_chk" value="1" required>
</center>
<br>       
</table>
<center>
  <tr>
    <td>
      <button type="submit" class="btn btn-outline-secondary" name="submit">
        <a href="index.php">
          <p1>Volver al Inicio</p1>
        </a>
      </button>
    </td>
  </tr>
  <tr>
    <!-- Botón para enviar a tercera página -->
  </tr>
  <a id="validar" href="mostrar_notarias.php?documento_seleccionado=<?php echo $documento_seleccionado; ?>&nombre=<?php echo $nombre; ?>" class="btn btn-outline-warning" onclick="valid()" >Continuar</a>
</center>

dando continuar sin marcar checkbox

1
  • Déjanos saber si alguna de las respuestas o comentarios solucionó tu problema marcándola con el check y con el upvote del lado izquierdo. En caso contrario, deja un comentario para tratar de darte otras soluciones.
    – DjCrazy
    el 5 abr. a las 22:14

2 respuestas 2

0

Posiblemente el problema que estás experimentando se debe a la función valid(). Esta se está ejecutando luego de que haces click en continuar.

Una de las formas en las que puedes evitar esto es utilizando un botón de tipo submit en el botón continuar.

De este modo te quedaría así:

<button type="submit">Continuar<button>

Y luego otro botón para volver al inicio:

<button type="button" onclick="window.location.href='index.php'">Volver al Inicio</button>

Con eso podrías hacer funcionar tu código. Saludos!

1
  • Hola, gracias por la ayuda . Puse a prueba el código y me da el mismo "error" ya que cuando lo dejo desmarcado me aparece la alerta y al darle aceptar me manda a la pagina siguiente y yo lo que quiero es que al darle aceptar me deje en la misma pagina y tenga que marcar obligatoriamente el checkbox para avanzar el 17 feb. a las 18:29
0

A grandes rasgos, puedes eliminar el evento onclick del botón y luego en JavaScript agregas un "escuchador" que captura el evento click del botón y agregas el método preventDefault() para detener el comportamiento por defecto del botón.

También eliminé los return y en su lugar agregué le instrucción else que captura la url y hace la redirección si pasa la validación.

Si quedan dudas, deja un comentario.

document.getElementById("validar").addEventListener("click", function(event) {
  event.preventDefault();
  //Validación de campo vacío
  if (document.getElementById("acepto_chk").checked == false) {
    alert("Acepta los terminos");
    document.getElementById("acepto_chk").focus();
  } else {
    let url = document.getElementById("validar").href;
    location.href = url;
  }
});
<label>He leído y comprendo los requerimientos &nbsp;</label>
<input type="checkbox" name="acepto_chk" id="acepto_chk" value="1" required>
<br>
<tr>
  <td>
    <button type="submit" class="btn btn-outline-secondary" name="submit">
      <a href="index.php">
        <p1>Volver al Inicio</p1>
      </a>
    </button>
  </td>
</tr>
<a id="validar" href="mostrar_notarias.php?documento_seleccionado=<?php echo $documento_seleccionado; ?>&nombre=<?php echo $nombre; ?>" class="btn btn-outline-warning">Continuar</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.