Javascript 如果当前模板中的表单无效，则阻止导航到其他路由

我的应用程序中有如下选项卡结构：

对于每个选项卡，我都有一个表单和一个提交按钮。如果未填写所有表单数据，则我将显示错误弹出窗口（使用angular UI bootstap模式弹出窗口），单击提交按钮时显示“填写帐户创建数据”

但我想做的是当用户点击上图中显示的个人详细信息选项卡（或任何其他选项卡）时，我还想显示错误消息“填写帐户创建数据”

通常，如果用户单击任何选项卡，并且其中一个表单未完全填写，则应显示错误弹出窗口

我已经编写了代码，在点击提交按钮时显示错误弹出窗口， 但不确定如何通过单击“路线”选项卡来实现这一点

我的路线代码如下：

onboardingApp.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {

        $routeProvider.when('/empDetails', {
            templateUrl: 'templates/employeeDetails.html',
            controller: 'empDetailsController',
            activeLink: 'empDetails',
            data: {
                login: false
            }
        });

        $routeProvider.when('/login', {
            templateUrl: 'templates/login.html',
            controller: 'loginController',
            activeLink: 'login',
            data: {
                login: true
            }
        });
        $routeProvider.when('/accType', {
            templateUrl: 'templates/accountType.html',
            controller: 'accountTypeController',
            activeLink: 'accType',
            data: {
                login: false
            }
        });

        $routeProvider.when('/verifyID', {
            templateUrl: 'templates/identityVerification.html',
            controller: 'verifyIdentityController',
            activeLink: 'verifyID',
            data: {
                login: false
            }
        });
        $routeProvider.when('/personalDetails', {
            templateUrl: 'templates/personalDetails.html',
            controller: 'personalDetailsController',
            activeLink: 'personalDetails',
            data: {
                login: false
            }
        });

        $routeProvider.otherwise({
            redirectTo: '/login'
        });


}]);

在这种情况下，请帮助我。是否有任何方法可以检查路由配置中Resolve属性中的表单有效性

提前谢谢