Проверка формы 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 фокусируется первое незаполненное поле, а во всех других протестированных браузерах (включая те, где работает валидация) текст "Пожалуйста, заполните это поле". добавляется ниже формы красным цветом. Я преследую этот проспект.

0 ответов

Другие вопросы по тегам