1

Buenas, tengo un problema que no sé como hacer. Tengo un formulario con una lista de checkbox y tengo que validar que haya por lo menos uno seleccionado.

el formulario es este:

<form id="formDetails" name="formDetails" ng-submit="sendForm()">
    <div class="col-xs-12 col-md-12">
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Children's</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Health & Beauty</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Science & Nature</label>
        </div>

        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Crafts & Hobbies</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">History</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Sports & Fitness</label>
        </div>
        <span class="error" ng-show="formDetails.topic.$error.required">Please select at least one topic</span>
    </div>
    <div>
        <button type="submit" class="btn btn-danger">Sign Up</button>
    </div>
</form>

Si no hay ninguno seleccionado, debería aparecer el mensaje y si por lo menos hay 1 checkbox seleccionado, debería ocultarse el mensaje.

Cómo podría hacer la función para validar si hay uno seleccionado? Sé como validar el checkbox de uno en uno, pero no de esta forma.

muchas gracias

1 respuesta 1

1

Puedes utilizar jquery plano sin necesidad de utilizar angular. Solo buscas los checkbox que estan checked:

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.error = false; 
  
  $scope.sendForm = function()
  {
    if($("#formDetails input[type=checkbox]:checked").length > 0) {
     alert("enviar form");
$scope.error = true; 
     }
     else{
       alert("no enviar form");
$scope.error = false; 
     }
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form ng-app="app" ng-controller="ctrl" id="formDetails" name="formDetails" ng-submit="sendForm()">
    <div class="col-xs-12 col-md-12">
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Children's</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Health & Beauty</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Science & Nature</label>
        </div>

        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Crafts & Hobbies</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">History</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" name="topic">Sports & Fitness</label>
        </div>
        <span class="error" ng-show="error">Please select at least one topic</span>
    </div>
    <div>
        <button type="submit" class="btn btn-danger">Sign Up</button>
    </div>
</form>

6
  • y el mensaje de error que tengo que mostrar <span class="error" ng-show="formDetails.topic.$error.required">Please select at least one topic</span> como lo muestro si no hay nada seleccionado y lo oculto si se selecciona 1 checkbox?
    – derek
    Commented el 6 sept. 2017 a las 22:06
  • formDetails.topic.$error.required es una propiedad de tu modelo?
    – Einer
    Commented el 6 sept. 2017 a las 22:07
  • he puesto ese span de mensaje con el ng-show como tengo la validación del checkbox de la politica de privacidad y ahi me sale el mensaje pero en la lista de checkbox tengo que mostrar ese mensaje, el cual no sé como mostrarlo, cuando tengo esa lista de checkbox y ninguno está seleccionado
    – derek
    Commented el 6 sept. 2017 a las 22:12
  • Dale una mirada a la respuesta actualizada y dime si eso es lo que esperaba.
    – Einer
    Commented el 6 sept. 2017 a las 22:16
  • si, era eso. Muchas gracias
    – derek
    Commented el 6 sept. 2017 a las 22:27

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.