Question

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

我的环境

jquery-1.11.1.js
AngularJS v1.2.26
Angular UI Modal 0.10.0
webshim-1.15.4

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

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

部分我的Angular app 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>

//在角应用中的方法下方，以便在动态视图加载时更新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>

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

使用Angular UI和IE在IE8中进行表单验证webshims

0 个答案: