6

Quisiera saber la manera de validar un Checkbox con JQuery en un pequeño formulario.

<form action="">
  <a>Correo: </a>
  <input type="email" name="correo">
  <br>
  <a>Telefono: </a>
  <input type="text" name="telefono">
  <br>
  <a>Aceptar condiciones: </a>
  <input type="checkbox" name="aceptar">
  <br>
  <button type="submit" id="submit">Enviar Formulario</button>
</form>

Encontré varios tipos de validaciones .is(selector)y .prop() pero traté de aplicarlos y no lo logré conseguir, únicamente quiero que arroje un alert que diga algo como Acepta las condiciones.

1

4 respuestas 4

10

Cuando usas is() tienes que usar el selector :checked:

$(document).ready(function() {
    $("#submit").on("click", function() {
        var condiciones = $("#aceptar").is(":checked");
        if (!condiciones) {
            alert("Debe aceptar las condiciones");
            event.preventDefault();
        }
    });
});
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<form action="">
    <div>
        <p>Correo: </p>
        <input type="email" name="correo" id="correo">
    </div>
    <div>
        <p>Telefono: </p>
        <input type="text" name="telefono" id="telefono">
    </div>
    <div>
        <p>Aceptar condiciones: </p>
        <input type="checkbox" name="aceptar" id="aceptar">
    </div>
    <button type="submit" id="submit">Enviar Formulario </button>
</form>

Cuando no se han marcado las condiciones debes usar event.preventDefault() para evitar que el formulario haga el post.

2
  • 1
    Gracias por tu respuesta amigo, me resulto las mas adecuada para mi proyecto. Commented el 31 mar. 2016 a las 19:59
  • De nada @EduardoJavierMaldonado que bueno que te haya servido
    – César
    Commented el 31 mar. 2016 a las 20:01
3

Podrias implementar algo como ser

$(function(){
  $("#submit").click(function(event){
        var seleccion = $("#aceptar")[0].checked;
        if(!seleccion){
            event.preventDefault();
            alert("Acepta las condiciones");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form action="">
<a>Correo: </a><input type="email" name="correo"><br>
<a>Telefono: </a><input type="text" name="telefono"><br>
<a>Aceptar condiciones: </a><input type="checkbox" name="aceptar" id="aceptar" ><br>
<button type="submit" id="submit">Enviar Formulario </button>
</form>

Tambien hay otras alternativas como ser

var seleccion = $("#aceptar").is(':checked');
2

Solo pregunta si esta checkeado con .is(':checked'):

$('form').on('submit', function(){
    if($("input[type='checkbox']").is(':checked') === true)
    console.log('Soy valido')
  else{
  console.log('Soy invalido')
    return false; //Soy invalid
  } 
})

DEMO en vivo

1

Puedes hacer uso de "required" y así no tienes que usar JavaScript, aunque el mensaje mostrado dependerá del navegador.

<input type="checkbox" name="aceptar" required>

1
  • 2
    De echo estaba usando el required pero no me agrada por tal motivo pedí ayuda para poder hacerlo con jquery ya que asi me lo pidio mi cliente y no lo hice funcionar por pequeños errores no andaba tan perdido. Commented el 31 mar. 2016 a las 20:17

Tu Respuesta

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

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