0

我有一个表格，但是当我尝试验证复选框时，我遇到了一个问题，因为验证不同，一个验证是一个列表，您必须检查其中一个，然后在表格末尾我得到 2 个复选框，还有一个隐私政策和其他（如果您是 16 岁），但验证我已经检查了表单的所有复选框，并且不区分它是来自列表还是另一个复选框

形式：

<form id="formDetails" name="formDetails" ng-submit="sendForm()">
    <div>
        <p><strong>Select areas of interest:*</strong></p>
    </div>
    <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" id="topic" 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" id="topic" 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" id="topic" 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" id="topic" 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" id="topic" 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" id="topic" name="topic">Sports & Fitness</label>
          </div>
      </div>
      <div class="col-xs-12 col-md-12 policy">
          <div class="form-group col-xs-12 col-sm-6 col-md-12 form-info check-policy">
              <label class="checkbox-inline">
                  <input type="checkbox" ng-model="age" id="age" name="age">I can confirm I am over 16 years of age
                  <span class="error" ng-show="error">Please confirm you are over 16</span>
              </label>

          </div>
          <div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
              <label class="checkbox-inline">
                  <input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
                  <span class="error" ng-show="error">Please agree to the terms of the Privacy Policy</span>
              </label>
           </div>
       </div>
       <div>
           <button type="submit" class="btn btn-danger">Sign Up</button>
       </div>
   </form>

JS

var app = angular.module('formApp', []);
    app.controller('formCtrl', function ($scope) {

    $scope.error = false; 

    $scope.sendForm = function()
    {
        if($("#formDetails input[id=topic]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }

        if($("#formDetails input[id=age]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }

        if($("#formDetails input[id=terms]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }
    }
});

一开始我尝试使用input[type=checkbox]:checked但这样验证了表单中的所有复选框。

id="topic"如果是进行一次验证，如果是另一个验证，如果id="age"是id="term"另一个验证，如果没有检查显示消息，我该如何进行验证。

4

2 回答 2

1

您现在正在使用 angularjs，所以请停止在 jquery 中思考。这里没有必要使用 jquery。布尔值位于您在 html 元素上定义的模型中，例如：

ng-model="age"

因此，您可以通过以下方式访问复选框年龄的布尔值：

$scope.age

如果要使用多个错误消息，可以使用对象而不是布尔值，例如：

if($scope.age == true) {
    $scope.error.age = true; 
}else{
    $scope.error.age = false
}

或者你只是使用里面的模型ng-show

<div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
  <label class="checkbox-inline">
      <input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
      <span class="error" ng-show="terms">Please agree to the terms of the Privacy Policy</span>
  </label>
</div>
于 2017-09-07T11:51:48.817 回答
0

尝试这个。希望它会帮助你。 

ng-submit="sendForm(formDetails.$valid)"
$scope.sendForm = function()
    {
        if (!status) {
            return false;
        }else{
           //code here
        }
    }
于 2017-09-07T12:24:21.597 回答