Validar Checkbox PHP, JavaScript y jQuery: Ejemplos

Validar Checkbox PHP, JavaScript y jQuery. Cuando estemos programando un sistema y/o página web siempre nos encontraremos con formularios y por ende con validaciones en algún campo. Precisamente, en este artículo hablaremos de la validación de un CheckBox (Casilla de verificación).

Además, las validaciones de formularios nos permiten recibir la información correcta acerca de los usuarios que visitan nuestra plataforma online.

Validar Checkbox PHP, JavaScript y jQuery

A continuación, validaremos un CheckBox HTML, también en el lenguaje JavaScript y jQuery con ejemplos completos.

¿Qué es un CheckBox?

Los CheckBox o Casilla de Verificación son etiquetas del lenguaje HTML que interactúan con el usuario final a través de un formulario, son elementos que sirven para estructurar formularios y son muy útiles por ejemplo aceptar los términos y condiciones de servicio.

Primer método: Usando el lenguaje JavaScript

function validacion() {
    //Validación de campo vacío
    if (document.getElementById("aceptocondiciones_chk").checked==false){
        alert("Acepta los terminos y condiciones del servicio");
        document.getElementById("<strong>aceptocondiciones_chk</strong>").focus();
        return false;
    }
    return true;
}

Aquí, el código HTML que mostrara un formulario en el cual se aplicaría la validación en JavaScript.

<form name="contacto" method="post" action="" onSubmit="return validacion()">
   <table border="0">
   <tr>
   <td><label for="nombre">Nombre</label> </td>
   <td><input type="type" name="nombre"/></td>
   </tr>
   <tr>
   <td><label for="email">Email</label> </td>
   <td><input type="type" name="mail"/></td>
   </tr>
   <tr>
   <td><label for="mensaje">Mensaje</label></td>
   <td><textarea name="mensage_txt"></textarea> </td>
   </tr>
   <tr>
   <td></td>
   <td><input type="checkbox" name="aceptocondiciones_chk" id="aceptocondiciones_chk" value="1" /><span>Acepto las condiciones.</span></td>
   </tr>
   <tr>
   <td>
   <input type="submit" name="submit" value="Enviar">
   </td>
   <td>
   <input type="reset" value="Limpiar">
   </td>
   </tr>        
</table>
</form>

Segundo método: Usando el lenguaje PHP

En algunas ocasiones en el momento de validad un «CHECKBOX» nos trae muchos inconvenientes y no conseguimos validar un campo tipo checkbox dentro de un formulario HTML.

Una de las formas de comprobar el valor de dicho campo es manejarlo de la siguiente forma. A continuación, proponemos un ejemplo completo.

Formulario HTML con el método «POST» o «GET» para gestionar la información.

<form action="index.php" method="post">
<input type="checkbox" name="condiciones" value="1"> Aceptar condiciones de uso<br><br>
<input type="submit" name="enviar" value="Enviar"/>
</form>

La información enviada por el formulario al presionar el botón enviar lo recibirá el fichero «INDEX.PHP«, este fichero tendrá la función de procesar la información de la siguiente forma.

<?php
//Si se pulsa el botón enviar, se procesa la información
if (isset($_POST['enviar'])) {
   //Si el checkbox condiciones tiene valor y es igual a 1
   if (isset($_POST['condiciones']) && $_POST['condiciones'] == '1'){
      echo '<div style="color:blue">Has Aceptado Correctamente las Condiciones de Servicio.</div>';
  } else{
      echo '<div style="color:red">Debes aceptar las Condiciones de Servicio.</div>';
  }
}
?>

Tercer Método: Usando lenguaje jQuery para la validación

Este sería la tercera forma de validación y usaremos el lenguaje jQuery para lograr si un checkbox está seleccionado o no, podemos utilizar varios métodos.

En jQuery podemos tener más opciones de validación y no sabría decirte cual es mejor que otra. Podemos usarlo en varias situaciones y cualquiera de estos tiene el mismo resultado.

a) Usando el método .prop()

Con este metodo propio del jQuery .prop() podemos obtener el valor de la propiedad checked, por consiguiente, sabemos que los check manejan un valor lógico (true/false).

if( $('.micheckbox').prop('checked') ) {
    alert('Seleccionado');
}

b) Usando el método .is(selector)

La segunda opción es el método .is(selector) y nos permite comprobar si un elemento cumple con el selector especificado. Ademas, usando el pseudo selector :checked podemos verificar si el checkbox se encuentra seleccionado o no. Veamos un ejemplo de uso.

if( $('.micheckbox').is(':checked') ) {
    alert('Seleccionado');
}

Más datos.- Esta declaración lo aplicas en la etiqueta head de tu HTML y además 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();
        }
    });
});

Mostrando el formulario HTML y también declarar la librería jquery según su versión.

<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 envío de la información por el método post o GET.

CONCLUSIÓN VALIDAR CHECKBOX PHP

• En este artículo hemos visto 3 formas para poder validar una casilla de verificación (CHECKBOX), por ejemplo el JavaScript, PHP, jQuery.
• El uso de esta metodología en muy usado en diversas plataformas de internet como ser: Facebook, Google, Twitter, entre otras plataformas y servicios gratuitos o de pago en internet.
• Como hemos podido aprecias su implementación y su curva de aprendizaje es muy baja y nosotros podemos implementarlo sin ningún problema.

Siéntete libre de realizar un comentario, estaré gustoso en responderte en la brevedad posible.