AngularJS - 表单验证在Internet Exlo preR 9不工作 [英] Form validation not working in Internet Exloprer 9 - AngularJS

问题描述

表单验证工作正常在Firefox，但无法在Internet Explorer 9。

Form validation is working fine in Firefox but fails in Internet Explorer 9.

我在为动态生成必填字段这个span标记验证空字段。

I'm having this span tag for the dynamically generated mandatory fields to validate empty fields.

<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');
    };

Initailly我不得不

Initailly I had

$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);
};

这给了我

类型错误：无法获得属性值'$脏：对象为null或undefined

在IE9控制台，将其改为上面贴code后，该类型错误不见了，但仍围绕文本框中的红色边框，提醒空字段IE9不来用户。

in IE9 console, after changing it to the above posted code, the TypeError is gone but still the red border around the text box to alert the user for empty fields does not come in IE9.

应该怎样做具体到IE9，这样我可以验证空字段？

What should be done specific to IE9 so that I can validate the empty fields?

或者是有任何其他方式来验证这是在Firefox和IE浏览器动态生成的表单字段？

Or is there any other way to validate form fields which are generated dynamically in both Firefox and IE?

推荐答案

我知道，以确保验证一个表单的最好方法是检查表单上提交有效。

The best way I know to ensure validation for a form is check that the form is valid on submit.

继开发者指南形式，创建一个名为更新功能。然后添加一个检查，看看是否形式保存之前是有效的：

Following the Developer Guide for Forms, create a function called update. Then add a check to see if the form is valid before saving:

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

另外一个重要的步骤，这个新的更新功能连接到Submit按钮：

The other important steps are connecting this new update function to the Submit button:

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

在我看来，禁用而形式是无效的提交按钮：

And in my opinion, disabling the Submit button while the form is invalid:

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

请参见下面的例如的。
我包括两种不同的风格显示错误消息。

Please see the following example. I included two different styles of showing error messages.

这篇关于AngularJS - 表单验证在Internet Exlo preR 9不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！