表单验证在 Internet Exloprer 9 中不起作用 - AngularJS答案

【问题标题】：Form validation not working in Internet Exloprer 9 - AngularJS表单验证在 Internet Exloprer 9 中不起作用 - AngularJS
【发布时间】：2014-12-09 15:34:43
【问题描述】：

表单验证在 Firefox 中运行良好，但在 Internet Explorer 9 中失败。

我为动态生成的必填字段使用了这个 span 标签来验证空字段。

<span ng-show="hasError('"+fieldName+"', 'required')"></span>

$scope.hasError= function(field, validation){
        if(validation){
          return ('$scope.myForm.field.$dirty' && '$scope.myForm.field.$error[validation]') || ($scope.submitted && '$scope.myForm.field.$error[validation]');
        }
        return ('$scope.myForm.field.$dirty' && '$scope.myForm.field.$invalid') || ($scope.submitted && '$scope.myForm.field.$invalid');
    };

一开始我有

$scope.hasError = function(field, validation){
    if(validation){
      return ($scope.myForm[field].$dirty && $scope.myForm[field].$error[validation]) || ($scope.submitted && $scope.myForm[field].$error[validation]);
    }
    return ($scope.myForm[field].$dirty && $scope.myForm[field].$invalid) || ($scope.submitted && $scope.myForm[field].$invalid);
};

这给了我

TypeError：无法获取属性“$dirty”的值：对象为空或未定义

在 IE9 控制台中，将其更改为上面发布的代码后，TypeError 消失了，但文本框周围的红色边框仍然没有出现在 IE9 中。

应该针对 IE9 执行哪些操作才能验证空字段？

或者有没有其他方法可以验证在 Firefox 和 IE 中动态生成的表单字段？

【问题讨论】：

标签： javascript angularjs validation angularjs-validation

【解决方案1】：

我知道确保表单验证的最佳方法是检查表单在提交时是否有效。

在Developer Guide for Forms 之后，创建一个名为 update 的函数。然后在保存前添加检查表单是否有效：

$scope.update = function(user) {
    if (!$scope.myformname.$valid) return false;
    $scope.master = angular.copy(user);
};

其他重要步骤是将这个新的更新功能连接到提交按钮：

<form ng-submit="update(user)" name="myformname" novalidate>

在我看来，在表单无效时禁用提交按钮：

<input type="submit" ng-disabled="!myformname.$valid" value="Save" />

请查看以下example。我包含了两种不同风格的错误消息显示方式。

【讨论】：

【解决方案2】：

我觉得应该是$scope.myForm.field.$error.dirty

【讨论】：