1

如上所述，我使用 Angular JS 和 Bootstrap 的网站在从 Safari 或 IE9 访问时出现表单验证错误，尽管使用了 Webshim。但是，webshim 的表单模块的其他属性，例如占位符文本，确实有效。

当尝试在未填写所有必填字段的情况下提交表单时，控制台中返回的错误为：

SCRIPT438：对象不支持属性或方法“交换”

在 IE9 和：

TypeError: undefined is not a function (评估'$.swap')

在 Safari 上。

以下是我的 index.html 文件中的相关代码：

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/webshim/js-webshim/dev/polyfiller.js"></script>
<script>
  webshim.setOptions('forms', {
    lazyCustomMessages: true
  });
  webshim.polyfill('forms forms-ext filereader');
</script>

以及遇到此问题的一种形式：

<form name="reg.regForm" class="form-signin" ng-submit="submit()">
    <br>
    <input class="form-control input-lg" placeholder="Email Address" name="email" type="email"
           ng-model="reg.model().emailAddress" required="required"
           title="Please enter a valid email address"> <!--Email Address-->
    <input class="form-control input-lg" placeholder="Re-type Email Address" name="verifyEmail" type="email"
           ng-model="reg.model().verifyEmailAddress" required="required"
           title="Please enter a valid email address"> <!--Verify Email Address-->
    <input class="form-control input-lg" placeholder="First name" type="text"
           ng-model="reg.model().firstName" required="required"> <!--First Name-->
    <input class="form-control input-lg" placeholder="Last name" type="text"
           ng-model="reg.model().lastName" required="required"> <!--Last Name-->

    <div class="input-group"> <!--Gender-->
        <select class="form-control input-lg" ng-model="reg.model().gender"
                ng-style="reg.model().gender === 'Gender' && {'color':'darkgrey'}"
                ng-change="reg.noGenderAnswer=false;">
            <option style="color:black">Male</option>
            <option style="color:black">Female</option>
            <option style="color:black">Other</option>
            <option hidden="true" disabled style="color:darkgray">Gender</option>
        </select>
        <span class="input-group-addon input-group-lg"
              ng-style="reg.model().gender != 'Gender' && {'background-color':'white'}">
            <input type="checkbox" ng-model="reg.noGenderAnswer" ng-click="reg.model().gender='Gender'"
                   ng-disabled="reg.noGenderAnswer">
        </span>
        <span class="input-group-addon input-group-lg"
              ng-style="reg.model().gender != 'Gender' && {'background-color':'white'}">
            I choose not to answer.
        </span>
    </div>

    <div class="input-group"> <!--Year of Birth-->
        <select class="form-control input-lg" ng-model="reg.model().birthdate" style="border-top:0px;"
                ng-style="reg.model().birthdate === 'Year of Birth' && {'color': 'darkgrey'}"
                ng-change="reg.noBirthYear=false;"
                ng-options="possibleBirthYear as possibleBirthYear for possibleBirthYear in reg.possibleBirthYears">
            <option hidden="true" disabled value="" style="color:darkgray">
                Year of Birth
            </option>
        </select>
        <!--<select class="form-control input-lg" ng-model="reg.model().birthdate"
                ng-style="reg.model().birthdate === 'Year of Birth' && {'color': 'darkgrey'}"
                ng-change="reg.noBirthYear=false;">
            <option ng-repeat="possibleBirthYear in reg.possibleBirthYears"
                    style="color:black" ng-value="possibleBirthYear">
                {{possibleBirthYear}}
            </option>
            <option hidden="true" value="Year of Birth" style="color:darkgray">
                Year of Birth
            </option>
        </select>-->
        <span class="input-group-addon input-group-lg" style="border-top:0px;"
              ng-style="reg.model().birthdate != 'Year of Birth' && {'background-color':'white'}">
            <input type="checkbox" ng-model="reg.noBirthYear" ng-click="reg.model().birthdate='Year of Birth'"
                   ng-disabled="reg.model().birthdate === 'Year of Birth'">
        </span>
        <span class="input-group-addon input-group-lg" style="border-top:0px;"
              ng-style="reg.model().birthdate != 'Year of Birth' && {'background-color':'white'}">
            I choose not to answer.
        </span>
    </div>

    <input class="form-control input-lg" name="password" placeholder="Password" type="password"
           ng-model="reg.model().password" required="required" ng-minlength="6" style="border-top:0px;"> <!--Password-->
    <input class="form-control input-lg" ng-model="reg.verifyPassword"
           placeholder="Re-type Password" type="password" name="verifyPassword"
           ui-validate="{verify:'$value === reg.model().password'}"
           ui-validate-watch=" 'reg.model().password' "> <!--Verify Password-->

    <button class="btn btn-primary center-block btn-lg" type="submit">
        Continue
    </button>
</form>

我们正在使用 Angular v1.2.29、Bootstrap v3.1.1、Webshim v1.15.10 和 JQuery v2.2.3。

编辑：webshim 表单模块的其他方面（例如占位符文本）确实有效，如果 webshim 代码被删除，则停止工作。

EDIT2：一些进展：将类'ws-validate'添加到表单会导致验证部分工作；在 IE 中，第一个未填充的字段是焦点，在所有其他经过测试的浏览器中（包括验证工作的浏览器），文本“请填写此字段”。以红色添加到表格下方。我正在追求这条道路。

4

0 回答 0