1

我在 IE8 中使用 webshims 来支持 HTML5。我的 HTML5 表单验证在 IE8 中工作。但是当我在弹出窗口中有一个表单时（我正在使用 Angular UI Modal），在表单提交（ng-submit）上，模式框关闭并且验证消息出现在右上角。

我的环境是

  • jquery-1.11.1.js
  • AngularJS v1.2.26
  • Angular UI 模态 0.10.0
  • webshim-1.15.4

在控制台中，我收到此脚本错误

“无效元素似乎被隐藏了。使元素可见或使用禁用/只读来禁止验证元素。使用 fieldset[disabled] 可以忽略一组元素！如果选择替换，请参阅 shims/form-combat.js解决问题。”

部分我的 Angular 应用程序 html 加载 webshims

<script src="resources/js/jquery-1.11.1.js"></script>
<script src="resources/js/js-webshim/minified/polyfiller.js"></script>

<script>
    $.webshims.setOptions('forms', {
        overrideMessages : true
    });
    $.webshims.setOptions({
        waitReady : false
    });
    $.webshims.polyfill();
</script>

// 下面的方法在 Angular 应用程序中用于在动态视图加载时更新 Polyfill。

angular.module('essApp').run(function($rootScope, $templateCache) {
    $rootScope.$on('$viewContentLoaded', function() {       
        $('body').updatePolyfill();
    });
});

我调用弹出/模态的角度函数

$scope.showGoalDetail = function(index) {
                $log.info('index is', index);
                $log.info('goal is', $scope.goals.goalList[index]);
                var modalInstance = $modal.open({
                    templateUrl : 'org/goalDetailPopUp.html',
                    controller : 'PopUpInstanceCtrl',
                    size : 'lg',
                    backdrop : 'static',
                    resolve : {
                        valueObject : function() {
                            var valueObject = new Object();
                            valueObject.goal = {};
                            angular.copy($scope.goals.goalList[index], valueObject.goal);
                            valueObject.kpiList=$scope.goals.kpiList;
                            return valueObject;
                        }
                    }
                });

我在模态窗口中的表单

<div class="modal-header" style="background-color: #428bca; color: #FFFFFF">
    <h3 class="modal-title">Goal Detail</h3>
</div>
<div class="modal-body">
    <div class="panel panel-default">
        <div class="panel-heading">
            <p class="panel-title">Administration of prespective and priority</p>
        </div>
        <div class="panel-body">
            <form class="form-horizontal" role="form" ng-submit="ok()">
                <div class="form-group">
                    <label class="col-md-2 control-label">Dimension</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" required disabled ng-model="valueObject.goal.perspectiveDesc">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Key PerformanceIndicator</label>
                    <div class="col-md-10">
                        <textarea class="form-control" required ng-model="valueObject.goal.keyPerformanceIndicator"></textarea>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">OK</button>
                <button class="btn btn-danger" ng-click="cancel()">Cancel</button>
            </form>
        </div>
    </div>
</div>
<div class="modal-footer"></div>

我需要验证正确显示在字段旁边的弹出窗口中，感谢任何帮助。

4

0 回答 0