单击提交按钮时，如何触发所有验证

我为表单添加了验证，我希望它在单击提交按钮时触发每个验证。我试着在谷歌上搜索如何触发它们，但似乎它们对我不起作用。

这是我的表格代码

<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails" novalidate ng-submit="CustomerDetails.$valid && AddCustomer()">
    <div class="form-group" ng-class="{'has-error': CustomerDetails.cname.$invalid && !CustomerDetails.cname.$pristine}">
        <label class="col-lg-2 col-md-3 control-label">Customer Name</label>
        <div class="col-lg-10 col-md-9">
            <input type="text" ng-model="CusDetails.cname" class="form-control" name="cname" id="cname" required />
            <p ng-show="CustomerDetails.cname.$error.required && !CustomerDetails.cname.$pristine" class="help-block">Customer name required!</p>
        </div>
    </div>
    <!--end of .form-group-->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.comname.$invalid && !CustomerDetails.comname.$pristine}">
        <label class="col-lg-2 col-md-3 control-label">Company Name</label>
        <div class="col-lg-10 col-md-9">
            <input type="text" ng-model="CusDetails.comname" class="form-control" name="comname"id="comname" required />
            <p ng-show="CustomerDetails.comname.$error.required && !CustomerDetails.comname.$pristine" class="help-block">Comapany name required!</p>
        </div>
    </div>
    <!--end of .form-group-->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.ctel.$invalid && !CustomerDetails.ctel.$pristine}">
        <label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
        <div class="col-lg-10 col-md-9">
            <div class="input-group input-icon">
                <span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
                <input ng-model="CusDetails.tel" class="form-control" name="ctel" type="text" placeholder="(999) 999-9999" id="ctel" required >
                <p ng-show="CustomerDetails.ctel.$error.required && !CustomerDetails.ctel.$pristine" class="help-block">Telephone number required!</p>
            </div>
        </div>
    </div>
    <!-- End .form-group  -->
    <div class="form-group" ng-class="{'has-error': CustomerDetails.email.$invalid && !CustomerDetails.email.$pristine}">
        <label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
        <div class="col-lg-10 col-md-9">
            <input ng-model="CusDetails.email" type="email" class="form-control" name="email" placeholder="someone@example.com" id="email" required >
            <p ng-show="CustomerDetails.email.$error.required && !CustomerDetails.email.$pristine" class="help-block">Email is required!</p>
            <p ng-show="CustomerDetails.email.$error.email && !CustomerDetails.email.$pristine" class="help-block">Please Enter valid email address.</p>                                 
        </div>
    </div>
    <!-- End .form-group  -->
    <div class="form-group">
        <div class="col-lg-9 col-sm-9 col-xs-12">
            <button name="btnSubmit" type="submit" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
            <button type="button" id="cancel" class="btn btn-default pad">Cancel</button>
        </div>
    </div>
</form>

更新：我已经根据Adrian Brand更改了代码，但仍然没有触发。我做错了什么？

这是我的angularjs表格。（控制器）

(function () {
    'use strict';
    angular
        .module('efutures.hr.controllers.customer', [])
        .controller('AddCustomerController', AddCustomerController);
    AddCustomerController.$inject = ['$scope', '$location', '$rootScope', '$http', 'CustService'];
    function AddCustomerController($scope, $location, $rootScope, $http, CustService) {
        (function initController() {

        })();

        $scope.AddCustomer = function () {
            var CustomerDetails = {
                cname: $scope.CusDetails.cname,
                comname: $scope.CusDetails.comname,
                tel: $scope.CusDetails.tel,
                email: $scope.CusDetails.email
            };
            if ($scope.CustomerDetails.$valid) {
                CustService.Customer(CustomerDetails, function (res) {
                    console.log(res);
                    $.extend($.gritter.options, {
                        position: 'bottom-right',
                    });
                    if (res.data == 'success') {
                        $.gritter.add({
                            title: 'Success!',
                            text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustomerDetails.cname + '</span></h4>',
                            time: '',
                            close_icon: 'l-arrows-remove s16',
                            icon: 'glyphicon glyphicon-ok-circle',
                            class_name: 'success-notice'
                        });
                        $scope.CusDetails = {};
                        $scope.CustomerDetails.$setPristine();
                    }
                    else {
                        $.gritter.add({
                            title: 'Failed!',
                            text: 'Failed to add a new customer. Please retry.',
                            time: '',
                            close_icon: 'l-arrows-remove s16',
                            icon: 'glyphicon glyphicon-remove-circle',
                            class_name: 'error-notice'
                        });
                    }

                });
            }
        }
    }
})();

我甚至试着让提交的表格变成真的，但仍然没有成功。唯一对我有用的是禁用按钮，直到它被验证，但这不是要求。我希望它在单击提交表单时触发。我们将不胜感激。