AngularJS表单提交不与JQuery验证一起使用

我有一个AngularJS应用程序.我有一个注册页面.

看起来像这样

register.html

    
        
            
        
    

    
        
            
        
    

    
        
            
        
    
    

        
            Reset
        

        
            Register
        
    

我正在使用这个wraspbootstrap主题.它有表格验证.我正在使用的验证.我已经在页面中给出了我的规则.

$( document ).ready(function() {
    $.mask.definitions['~']='[+-]';
    $('#phone').mask('(999) 999-9999');

    jQuery.validator.addMethod("phone", function (value, element) {
        return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
    }, "Enter a valid phone number.");

    $('#userRegistration').validate({
        errorElement: 'div',
        errorClass: 'help-block',
        focusInvalid: false,
        rules: {
            userName:{
                required: true,
            },
            password: {
                required: true,
                minlength: 5
            },
            emailId: {
                required: true,
                email:true
            }
        },

        messages: {
            userName:{
                required:"Please choose a user name."
            },
            password: {
                required: "Please specify a password.",
                minlength: "Please specify a password of atleast 5 character."
            },
            emailId: {
                required: "Please provide email.",
                email: "Please provide a valid email."
            }
        },

        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('.alert-danger', $('.login-form')).show();
        },

        highlight: function (e) {
            $(e).closest('label.block').addClass('has-error');
        },

        success: function (e) {
            $(e).closest('label.block').removeClass('has-error');
            $(e).remove();
        },

        errorPlacement: function (error, element) {
            if(element.is(':checkbox') || element.is(':radio')) {
                var controls = element.closest('div[class*="col-"]');
                if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
            }
            else if(element.is('.select2')) {
                error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
            }
            else if(element.is('.chosen-select')) {
                error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
            }
            else error.insertAfter(element.parent());
        },

        submitHandler: function (form) {
        },
        invalidHandler: function (form) {
        }
    });

});

当我单击提交按钮时,Jquery验证正在进行,并且会出现错误消息.但与此同时,它registerUser()在angularJS中调用方法并将用户发布到控制器中.

这是我的控制器JS register.js

angular.module('myApp').controller('RegisterController', function($scope,$http) {
    page.setPage("Register","login-layout");
    $scope.user = {};
    $scope.registerUser=function()
    {
       alert("Submitting...");
    }
});

每当我单击提交按钮时,它始终会向消息发出警报,即使表单无效也是如此.仅当我单击"提交"按钮时才会进行验证.那么只有在表单有效时才能调用方法？