Skip to content

Commit cac6929

Browse files
bboylebboyle
committed
Merge pull request #21 from bboyle/google-earth
fix google earth issue with invalid radio buttons
2 parents 06f599c + c41a59f commit cac6929

File tree

10 files changed

+174
-55
lines changed

10 files changed

+174
-55
lines changed

‎Gruntfile.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@ module.exports = function( grunt ) {
4545
},
4646
// code quality tasks
4747
qunit: {
48-
unit: [ 'test/**/*.html' ],
48+
unit: [
49+
'test/*.html',
50+
'!test/google-earth.html'
51+
],
4952
// test other jquery versions
5053
jquery: {
5154
options: {

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "html5.constraintValidationAPI",
33
"title": "HTML5 constraintValidationAPI",
4-
"version": "1.0.3",
4+
"version": "1.0.4",
55
"homepage": "https://github.com/bboyle/html5-constraint-validation-API",
66
"authors": [
77
"Ben Boyle <[email protected]>"

‎dist/html5.constraintValidationAPI.js‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/*! HTML5 constraintValidationAPI - v1.0.3 - 2014-04-03
2-
* https://github.com/bboyle/html5-constraint-validation-API
3-
* Copyright (c) 2014 Ben Boyle; Licensed MIT */
1+
/*! HTML5 constraintValidationAPI - v1.0.4 - 2015-02-02
2+
* https://github.com/bboyle/html5-constraint-validation-API
3+
* Copyright (c) 2015 Ben Boyle; Licensed MIT */
44
/*exported initConstraintValidationAPI*/
55
if ( jQuery !== 'undefined' ) {
66
(function( $ ) {
@@ -15,10 +15,16 @@ if ( jQuery !== 'undefined' ) {
1515
candidateForValidation = 'input, select, textarea',
1616

1717
// for feature detection
18-
input = $( '<input>' ),
18+
input = $( '<input>' ).get( 0 ),
1919

2020
// polyfill test
21-
polyfill = typeof input[ 0 ].validity !== 'object',
21+
polyfill = typeof input.validity !== 'object',
22+
23+
24+
// invalid fields filter
25+
isInvalid = function() {
26+
return ! ( this.disabled || this.validity.valid );
27+
},
2228

2329

2430
// manage validity state object
@@ -146,14 +152,24 @@ if ( jQuery !== 'undefined' ) {
146152
}
147153

148154
// NOTE the code below runs in all browsers to polyfill implementation bugs
149-
// e.g. Opera 11 on OSX fires submit event even when fields are invalid
155+
156+
// google earth treats all required radio buttons as invalid
157+
// if the only thing stopping submission is a required radio button group...
158+
invalid = form.find( candidateForValidation ).filter( isInvalid );
159+
if ( invalid.length === invalid.filter( ':radio' ).length && invalid.length === invalid.filter(function() {
160+
// radio button has been checked, but is flagged as value missing
161+
return this.validity.valueMissing && $( this.form.elements[ this.name ]).filter( ':checked' ).length > 0;
162+
}).length ) {
163+
// let submission continue
164+
invalid.removeAttr( 'required' );
165+
}
166+
167+
// Opera 11 on OSX fires submit event even when fields are invalid
150168
// correct implementations will not invoke this submit handler until all fields are valid
151169

152170
// unless @novalidate
153171
// if there are invalid fields
154-
if ( ! novalidate && form.find( candidateForValidation ).filter(function() {
155-
return ! ( this.disabled || this.validity.valid );
156-
}).length > 0 ) {
172+
if ( ! novalidate && form.find( candidateForValidation ).filter( isInvalid ).length > 0 ) {
157173
// abort submit
158174
event.stopImmediatePropagation();
159175
event.preventDefault();
@@ -185,7 +201,7 @@ if ( jQuery !== 'undefined' ) {
185201
}
186202

187203
// INPUT validitationMessage
188-
if ( typeof input[ 0 ].validationMessage !== 'string' ) {
204+
if ( typeof input.validationMessage !== 'string' ) {
189205
// set us up the API
190206
candidates.filter(function() {
191207
return typeof this.validationMessage !== 'string';
@@ -195,7 +211,7 @@ if ( jQuery !== 'undefined' ) {
195211
}
196212

197213
// INPUT checkValidity
198-
if ( typeof input[ 0 ].checkValidity !== 'function' ) {
214+
if ( typeof input.checkValidity !== 'function' ) {
199215
// set us up the API
200216
candidates.filter(function() {
201217
return typeof this.checkValidity !== 'function';
@@ -217,7 +233,7 @@ if ( jQuery !== 'undefined' ) {
217233
}
218234

219235
// INPUT setCustomValidity
220-
if ( typeof input[ 0 ].setCustomValidity !== 'function' ) {
236+
if ( typeof input.setCustomValidity !== 'function' ) {
221237
// set us up the API
222238
candidates.filter(function() {
223239
return typeof this.setCustomValidity !== 'function';

‎dist/html5.constraintValidationAPI.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎libs/jquery-loader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
(function() {
22
// Default to the local version.
3-
var path = '../bower_components/jquery/dist/jquery.js';
3+
var path = '../node_modules/jquery/dist/jquery.js';
44
// Get any jquery=___ param from the query string.
55
var jqversion = location.search.match(/[?&]jquery=(.*?)(?=&|$)/);
66
// If a version was specified, use that version from code.jquery.com.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "html5.constraintValidationAPI",
33
"title": "HTML5 constraintValidationAPI",
44
"description": "A polyfill for the HTML5 constraintValidationAPI",
5-
"version": "1.0.3",
5+
"version": "1.0.4",
66
"homepage": "https://github.com/bboyle/html5-constraint-validation-API",
77
"author": {
88
"name": "Ben Boyle",
@@ -29,6 +29,9 @@
2929
"directories": {
3030
"test": "test"
3131
},
32+
"dependencies": {
33+
"jquery": "^2.1.3"
34+
},
3235
"devDependencies": {
3336
"grunt": "~0.4.5",
3437
"grunt-contrib-clean": "~0.6.0",

‎src/html5.constraintValidationAPI.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,16 @@ if ( jQuery !== 'undefined' ) {
1919
candidateForValidation = 'input, select, textarea',
2020

2121
// for feature detection
22-
input = $( '<input>' ),
22+
input = $( '<input>' ).get( 0 ),
2323

2424
// polyfill test
25-
polyfill = typeof input[ 0 ].validity !== 'object',
25+
polyfill = typeof input.validity !== 'object',
26+
27+
28+
// invalid fields filter
29+
isInvalid = function() {
30+
return ! ( this.disabled || this.validity.valid );
31+
},
2632

2733

2834
// manage validity state object
@@ -150,14 +156,24 @@ if ( jQuery !== 'undefined' ) {
150156
}
151157

152158
// NOTE the code below runs in all browsers to polyfill implementation bugs
153-
// e.g. Opera 11 on OSX fires submit event even when fields are invalid
159+
160+
// google earth treats all required radio buttons as invalid
161+
// if the only thing stopping submission is a required radio button group...
162+
invalid = form.find( candidateForValidation ).filter( isInvalid );
163+
if ( invalid.length === invalid.filter( ':radio' ).length && invalid.length === invalid.filter(function() {
164+
// radio button has been checked, but is flagged as value missing
165+
return this.validity.valueMissing && $( this.form.elements[ this.name ]).filter( ':checked' ).length > 0;
166+
}).length ) {
167+
// let submission continue
168+
invalid.removeAttr( 'required' );
169+
}
170+
171+
// Opera 11 on OSX fires submit event even when fields are invalid
154172
// correct implementations will not invoke this submit handler until all fields are valid
155173

156174
// unless @novalidate
157175
// if there are invalid fields
158-
if ( ! novalidate && form.find( candidateForValidation ).filter(function() {
159-
return ! ( this.disabled || this.validity.valid );
160-
}).length > 0 ) {
176+
if ( ! novalidate && form.find( candidateForValidation ).filter( isInvalid ).length > 0 ) {
161177
// abort submit
162178
event.stopImmediatePropagation();
163179
event.preventDefault();
@@ -189,7 +205,7 @@ if ( jQuery !== 'undefined' ) {
189205
}
190206

191207
// INPUT validitationMessage
192-
if ( typeof input[ 0 ].validationMessage !== 'string' ) {
208+
if ( typeof input.validationMessage !== 'string' ) {
193209
// set us up the API
194210
candidates.filter(function() {
195211
return typeof this.validationMessage !== 'string';
@@ -199,7 +215,7 @@ if ( jQuery !== 'undefined' ) {
199215
}
200216

201217
// INPUT checkValidity
202-
if ( typeof input[ 0 ].checkValidity !== 'function' ) {
218+
if ( typeof input.checkValidity !== 'function' ) {
203219
// set us up the API
204220
candidates.filter(function() {
205221
return typeof this.checkValidity !== 'function';
@@ -221,7 +237,7 @@ if ( jQuery !== 'undefined' ) {
221237
}
222238

223239
// INPUT setCustomValidity
224-
if ( typeof input[ 0 ].setCustomValidity !== 'function' ) {
240+
if ( typeof input.setCustomValidity !== 'function' ) {
225241
// set us up the API
226242
candidates.filter(function() {
227243
return typeof this.setCustomValidity !== 'function';

‎test/google-earth.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en-AU">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>google earth tests · Constraint Validation API tests</title>
6+
7+
<!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
8+
<script src="../libs/jquery-loader.js"></script>
9+
<!-- Load local lib and tests. -->
10+
<script src="../src/html5.constraintValidationAPI.js"></script>
11+
12+
<style>
13+
:invalid:before {
14+
display: block;
15+
content: "invalid";
16+
color: red;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
23+
24+
<p>This form is for testing validation in the google earth internal browser.
25+
You should be able to submit this form (and be taken to this repo home page).</p>
26+
27+
<form action="https://github.com/bboyle/html5-constraint-validation-API" action>
28+
29+
<ol class="questions">
30+
31+
<li>
32+
<fieldset>
33+
<legend>
34+
<span class="label">Radio foo</span>
35+
<abbr title="(required)">*</abbr>
36+
</legend>
37+
<ul class="choices">
38+
<li>
39+
<input type="radio" name="radioFoo" value="foo" id="radio-foo-foo" required>
40+
<label for="radio-foo-foo">Foo</label>
41+
</li>
42+
<li>
43+
<input type="radio" name="radioFoo" value="bar" id="radio-foo-bar">
44+
<label for="radio-foo-bar">Bar</label>
45+
</li>
46+
<li>
47+
<input type="radio" name="radioFoo" value="" id="radio-foo-BLANK">
48+
<label for="radio-foo-BLANK">BLANK</label>
49+
</li>
50+
<li>
51+
<input type="radio" name="radioFoo" value="undefined" id="radio-foo-undefined">
52+
<label for="radio-foo-undefined">undefined</label>
53+
</li>
54+
<li>
55+
<input type="radio" name="radioFoo" value="null" id="radio-foo-null">
56+
<label for="radio-foo-null">null</label>
57+
</li>
58+
</ul>
59+
</fieldset>
60+
</li>
61+
62+
<li class="footer">
63+
<ol class="submit">
64+
<li>
65+
<strong>
66+
<input type="submit" value="Submit">
67+
</strong>
68+
</li>
69+
</ol>
70+
</li>
71+
72+
</ol>
73+
</form>
74+
75+
76+
</body>
77+
</html>

‎test/required.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en-AU">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="UTF-8">
55
<title>required tests · Constraint Validation API tests</title>
66

77
<!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
@@ -73,19 +73,19 @@
7373
<label for="radio-foo-foo">Foo</label>
7474
</li>
7575
<li>
76-
<input type="radio" name="radioFoo" value="bar" id="radio-foo-bar" />
76+
<input type="radio" name="radioFoo" value="bar" id="radio-foo-bar">
7777
<label for="radio-foo-bar">Bar</label>
7878
</li>
7979
<li>
80-
<input type="radio" name="radioFoo" value="" id="radio-foo-BLANK" />
80+
<input type="radio" name="radioFoo" value="" id="radio-foo-BLANK">
8181
<label for="radio-foo-BLANK">BLANK</label>
8282
</li>
8383
<li>
84-
<input type="radio" name="radioFoo" value="undefined" id="radio-foo-undefined" />
84+
<input type="radio" name="radioFoo" value="undefined" id="radio-foo-undefined">
8585
<label for="radio-foo-undefined">undefined</label>
8686
</li>
8787
<li>
88-
<input type="radio" name="radioFoo" value="null" id="radio-foo-null" />
88+
<input type="radio" name="radioFoo" value="null" id="radio-foo-null">
8989
<label for="radio-foo-null">null</label>
9090
</li>
9191
</ul>
@@ -109,7 +109,7 @@
109109
<ol class="submit">
110110
<li>
111111
<strong>
112-
<input type="submit" value="Submit" />
112+
<input type="submit" value="Submit">
113113
</strong>
114114
</li>
115115
</ol>
@@ -119,6 +119,5 @@
119119
</form>
120120
</div>
121121

122-
123122
</body>
124123
</html>

0 commit comments

Comments
 (0)