为什么表单验证不适用于jquery.validation.js？

Question

我正在尝试一个名为jquery.validation.js的新插件，似乎在我尝试应用它们之后它无法正常工作。有人可以帮我这个吗？

这是page.html

<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails">
    <div class="form-group">
        <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"/>
        </div>
    </div>
    <!--end of .form-group-->
    <div class="form-group">
        <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" />
        </div>
    </div>
    <!--end of .form-group-->
    <div class="form-group">
        <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">
            </div>
        </div>
    </div>
    <!-- End .form-group  -->
    <div class="form-group">
        <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">
        </div>
    </div>
    <!-- End .form-group  -->
</form>
div class="row">
                <div class="col-md-1"></div>
                <div class="col-lg-9 col-sm-9 col-xs-12">
                    <button name="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
                    <button type="submit" id="cancel" class="btn btn-default pad">Cancel</button>
                </div>
            </div>

这里是angular.controller.js的外观

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

            };

            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 = {};
                }
                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'
                    });
                }


            });
        }
    }

最后用于验证上述表格的validation.js

$(document).ready(function () {

    $("#CustomerDetails").validate({

        debug:true,

        errorPlacement: function (error, element) {

            var place = element.closest('.input-group');

            if (!place.get(0)) {
                place = element;
            }

            if (error.text() !== '') {
                place.after(error);
            }
        },
        errorClass: 'help-block',
        rules: {
            cname: {
                required: true,

            },
            comname: {
                required: true
            },

            ctel: {
                required: true,
                min: 10
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            cname: {
                required: "Please enter customer name!"
            },
            comname: {
                required: "Please enter company name!"
            },
            ctel: {
                required: "Please enter telephone number",
                minlength: "Telephone number should be atleast 10 digits"
            }
        },
        highlight: function (label) {
            $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        success: function (label) {
            $(label).closest('.form-group').removeClass('has-error');
            label.remove();
        }
    });
});

验证中来自内置函数的调试错误说： 没有选择，无法验证，什么都不返回。

我做错了什么？为什么验证没有.js没有被调用？ 非常感谢帮助。