我正在使用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>
如果字段包含数据,如何让提交按钮验证?