As said above, my site, which uses Angular JS and Bootstrap, has form validation errors when accessed from Safari or IE9, despite the use of Webshim. However, other attributes of webshim's form module, such as placeholder text, do work.
When an attempt is made to submit the form without all required fields filled, the error returned in the console is:
SCRIPT438: Object doesn't support property or method 'swap'
on IE9 and:
TypeError: undefined is not a function (evaluating '$.swap')
on Safari.
The following is the relevant code from my index.html file:
<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>
And one of the forms where this problem is encountered:
<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>
We are using Angular v1.2.29, Bootstrap v3.1.1, Webshim v1.15.10, and JQuery v2.2.3.
EDIT: Other aspects of webshim's forms module (such as placeholder text) do work, and do stop working if the webshim code is removed.
EDIT2: Some progress: Adding the class 'ws-validate' to the form causes validation to work partially; in IE, the first non-filled field is focused, and in all other browsers tested (including those where validation works), the text 'Please fill out this field.' is added below the form in red. I am pursuing this avenue.