Проверка формы Webshim (использование обязательного атрибута) не удалась в IE9 и Safari в проекте AngularJs/Bootstrap
Как было сказано выше, мой сайт, который использует Angular JS и Bootstrap, имеет ошибки проверки формы при доступе из Safari или IE9, несмотря на использование Webshim. Однако другие атрибуты модуля формы webshim, такие как текст-заполнитель, работают.
Когда делается попытка отправить форму без заполнения всех обязательных полей, в консоли возвращается ошибка:
SCRIPT438: объект не поддерживает свойство или метод 'swap'
на IE9 и:
Ошибка типа: 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>
И одна из форм, где эта проблема встречается:
<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 удален.
РЕДАКТИРОВАТЬ 2: Некоторый прогресс: добавление класса 'ws-validate' в форму заставляет проверку работать частично; в IE фокусируется первое незаполненное поле, а во всех других протестированных браузерах (включая те, где работает валидация) текст "Пожалуйста, заполните это поле". добавляется ниже формы красным цветом. Я преследую этот проспект.