上記のように、Angular JS と Bootstrap を使用している私のサイトでは、Webshim を使用しているにもかかわらず、Safari または IE9 からアクセスするとフォーム検証エラーが発生します。ただし、プレースホルダー テキストなど、webshim のフォーム モジュールの他の属性は機能します。
すべての必須フィールドに入力せずにフォームを送信しようとすると、コンソールに次のエラーが返されます。
SCRIPT438: オブジェクトはプロパティまたはメソッド 'swap' をサポートしていません
IE9 および:
TypeError: undefined は関数ではありません (「$.swap」を評価しています)
サファリで。
以下は、私の 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>
そして、この問題が発生するフォームの 1 つ:
<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 では、入力されていない最初のフィールドがフォーカスされ、テストされた他のすべてのブラウザー (検証が機能するブラウザーを含む) では、「このフィールドに入力してください」というテキストが表示されます。フォームの下に赤色で追加されます。私はこの道を追求しています。