切换视图时不保留验证

时间:2016-12-30 11:39:16

标签: jquery angularjs validation angular-ui-bootstrap

我正在使用AngularJS和Bootstrap验证器。我创建了2个视图。在第一个视图中,我有一些控件和一个提交按钮。在第二个视图中,我显示了提交数据的仪表板视图。

在第一个视图中,我保留了一些控件作为提交数据的必填字段。在某些情况下,在视图之间切换并在不填写数据的情况下提交表单是不可验证的。

$scope.createMenu = true;
$scope.show = function(value) {
  if (value === 'createMenu') {
    $scope.clear();
    $scope.createMenu = true;
    $scope.dashboardMenuViewCount = false;
    $scope.dashboardMenu = false;
    $scope.init();
    $scope.viewCountDashboard = [];
    $scope.init();
  }

  if (value === 'dashboardMenu') {
    $scope.clear();
    $scope.viewCountDashboard = [];
    $scope.createMenu = false;

    //get the report
    testAPIService.getSummary().success(function(response) {
      $scope.dashboard = response;
      $scope.dashboardMenu = true;
    });
    $scope.init();
  }
}

jQuery("#createForm").bootstrapValidator({
  framework: 'bootstrap',
  excluded: [':disabled', ':hidden', ':not(:visible)'],
  icon: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
    notificationTypeSelect: {
      validators: {
        callback: {
          message: 'Please select the Type',
          callback: function(value, validator, $field) {
            /* Get the selected options */
            var options = validator.getFieldElements('TypeSelect').val();
            return (options != null && options.length >= 1);
          }
        }
      }
    },
    Name: {
      validators: {
        notEmpty: {
          message: 'name required.'
        }
      }
    }
  }
}).on('err.field.fv', function(e, data) {
  data.fv.disableSubmitButtons(false);
}).on('success.field.fv', function(e, data) {
  data.fv.disableSubmitButtons(false);
})

$scope.add = function() {
  var bootstrapValidator = jQuery("#createForm").data('bootstrapValidator');
  bootstrapValidator.validate();
  $scope.init();
  if (bootstrapValidator.isValid()) {
    $scope.adddata();
  } else return;
};
<ul>
  <li ng-class="{active: createMenu}" 
      <a href="" ng-click="show('createMenu')">Create</a>
  </li>
  <li ng-class="{active: dashboardMenu}">
    <a href="" ng-click="show('dashboardMenu')"> Dashboard</a>
  </li>
</ul>

<div class="container" ng-show="createMenu">
  <div>
    <div>
      <label>Type:</label>
    </div>
    <div>
      <select name="TypeSelect" ng-model="selectedType" ng-options="test.TestTypeName for test in tests" ng-change="updateImageUrl(selectedType)">
        <option value="">-- Select the Type --</option>
      </select>
    </div>
  </div>
  <div>
    <div>
      <label>Name :</label>
    </div>
    <div>
      <input type="text" ng-model="testnName" name="testName" />
    </div>
  </div>
  <div>
    <div>
      <input type="submit" value="Submit" ng-click="add()" />
      <input type="button" id="btnReset" value="Cancel" ng-click="reset()" />
    </div>
  </div>
  <div ng-show="dashboardMenu"></div>

如果字段包含数据,如何让提交按钮验证?

0 个答案:

没有答案