Skip to content

Commit 2dc8434

Browse files
bboylebboyle
committed
Merge pull request #22 from bboyle/google-earth
fix #20: handling of required radio button bug
2 parents cac6929 + 994ad6f commit 2dc8434

File tree

6 files changed

+136
-28
lines changed

6 files changed

+136
-28
lines changed

‎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.4",
4+
"version": "1.0.5",
55
"homepage": "https://github.com/bboyle/html5-constraint-validation-API",
66
"authors": [
77
"Ben Boyle <[email protected]>"

‎dist/html5.constraintValidationAPI.js‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! HTML5 constraintValidationAPI - v1.0.4 - 2015-02-02
1+
/*! HTML5 constraintValidationAPI - v1.0.5 - 2015-02-09
22
* https://github.com/bboyle/html5-constraint-validation-API
33
* Copyright (c) 2015 Ben Boyle; Licensed MIT */
44
/*exported initConstraintValidationAPI*/
@@ -16,6 +16,9 @@ if ( jQuery !== 'undefined' ) {
1616

1717
// for feature detection
1818
input = $( '<input>' ).get( 0 ),
19+
// radio button bug (google earth internal browser)
20+
radioButtonBug = $( '<input type="radio" required checked>' ).get( 0 ).validity.valueMissing,
21+
validateBuggyRadioButtons,
1922

2023
// polyfill test
2124
polyfill = typeof input.validity !== 'object',
@@ -151,17 +154,11 @@ if ( jQuery !== 'undefined' ) {
151154
});
152155
}
153156

154-
// NOTE the code below runs in all browsers to polyfill implementation bugs
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' );
157+
// NOTE all the code below runs in all browsers to polyfill implementation bugs
158+
159+
// required radio button check
160+
if ( radioButtonBug ) {
161+
validateBuggyRadioButtons( this );
165162
}
166163

167164
// Opera 11 on OSX fires submit event even when fields are invalid
@@ -246,6 +243,46 @@ if ( jQuery !== 'undefined' ) {
246243
});
247244
}
248245

246+
// check for required radio button bug (google earth internal browser)
247+
if ( radioButtonBug ) {
248+
validateBuggyRadioButtons = function( form ) {
249+
var seen = {};
250+
var radio, valueMissing;
251+
252+
// check every required radio button
253+
$( 'input', form ).filter( ':radio' ).filter( '[required],[aria-required="true"]' ).each(function() {
254+
if ( typeof seen[ this.name ] === 'undefined' ) {
255+
seen[ this.name ] = true;
256+
257+
radio = $( this.form.elements[ this.name ] );
258+
valueMissing = radio.filter( ':checked' ).length === 0;
259+
260+
if ( valueMissing ) {
261+
// make sure @required is set to use validation API
262+
radio.attr( 'required', 'required' );
263+
} else {
264+
// using @aria-required=true so we can track this control
265+
// removing @required here to bypass validation bug
266+
radio.attr( 'aria-required', true ).removeAttr( 'required' );
267+
}
268+
}
269+
});
270+
};
271+
272+
// initial validity
273+
$( 'form' ).each( validateBuggyRadioButtons );
274+
275+
// watch changes
276+
if ( ! polyfill ) {
277+
candidates.filter( ':radio' )
278+
.unbind( 'change.constraintValidationAPI' )
279+
.bind( 'change.constraintValidationAPI', function() {
280+
validateBuggyRadioButtons( this.form );
281+
})
282+
;
283+
}
284+
}
285+
249286
// check validity on submit
250287
// this should be bound before all other submit handlers bound to the same form
251288
// otherwise they will execute before this handler can cancel submit (oninvalid)

‎dist/html5.constraintValidationAPI.min.js‎

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

‎package.json‎

Lines changed: 1 addition & 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.4",
5+
"version": "1.0.5",
66
"homepage": "https://github.com/bboyle/html5-constraint-validation-API",
77
"author": {
88
"name": "Ben Boyle",

‎src/html5.constraintValidationAPI.js‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ if ( jQuery !== 'undefined' ) {
2020

2121
// for feature detection
2222
input = $( '<input>' ).get( 0 ),
23+
// radio button bug (google earth internal browser)
24+
radioButtonBug = $( '<input type="radio" required checked>' ).get( 0 ).validity.valueMissing,
25+
validateBuggyRadioButtons,
2326

2427
// polyfill test
2528
polyfill = typeof input.validity !== 'object',
@@ -155,17 +158,11 @@ if ( jQuery !== 'undefined' ) {
155158
});
156159
}
157160

158-
// NOTE the code below runs in all browsers to polyfill implementation bugs
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' );
161+
// NOTE all the code below runs in all browsers to polyfill implementation bugs
162+
163+
// required radio button check
164+
if ( radioButtonBug ) {
165+
validateBuggyRadioButtons( this );
169166
}
170167

171168
// Opera 11 on OSX fires submit event even when fields are invalid
@@ -250,6 +247,46 @@ if ( jQuery !== 'undefined' ) {
250247
});
251248
}
252249

250+
// check for required radio button bug (google earth internal browser)
251+
if ( radioButtonBug ) {
252+
validateBuggyRadioButtons = function( form ) {
253+
var seen = {};
254+
var radio, valueMissing;
255+
256+
// check every required radio button
257+
$( 'input', form ).filter( ':radio' ).filter( '[required],[aria-required="true"]' ).each(function() {
258+
if ( typeof seen[ this.name ] === 'undefined' ) {
259+
seen[ this.name ] = true;
260+
261+
radio = $( this.form.elements[ this.name ] );
262+
valueMissing = radio.filter( ':checked' ).length === 0;
263+
264+
if ( valueMissing ) {
265+
// make sure @required is set to use validation API
266+
radio.attr( 'required', 'required' );
267+
} else {
268+
// using @aria-required=true so we can track this control
269+
// removing @required here to bypass validation bug
270+
radio.attr( 'aria-required', true ).removeAttr( 'required' );
271+
}
272+
}
273+
});
274+
};
275+
276+
// initial validity
277+
$( 'form' ).each( validateBuggyRadioButtons );
278+
279+
// watch changes
280+
if ( ! polyfill ) {
281+
candidates.filter( ':radio' )
282+
.unbind( 'change.constraintValidationAPI' )
283+
.bind( 'change.constraintValidationAPI', function() {
284+
validateBuggyRadioButtons( this.form );
285+
})
286+
;
287+
}
288+
}
289+
253290
// check validity on submit
254291
// this should be bound before all other submit handlers bound to the same form
255292
// otherwise they will execute before this handler can cancel submit (oninvalid)

‎test/google-earth.html‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@
2424
<p>This form is for testing validation in the google earth internal browser.
2525
You should be able to submit this form (and be taken to this repo home page).</p>
2626

27+
28+
<button>Uncheck all radio buttons</button>
29+
<script>
30+
$( 'button' ).click(function() {
31+
$( ':radio' ).prop( 'checked', false );
32+
});
33+
</script>
34+
35+
36+
<h2>Form A</h2>
2737
<form action="https://github.com/bboyle/html5-constraint-validation-API" action>
2838

2939
<ol class="questions">
@@ -68,10 +78,34 @@
6878
</li>
6979
</ol>
7080
</li>
71-
7281
</ol>
7382
</form>
7483

7584

85+
<h2>Form B</h2>
86+
87+
<form action="https://github.com/bboyle/html5-constraint-validation-API" method="get">
88+
<ol class="questions">
89+
<li class="select1">
90+
<fieldset id="cc-type">
91+
<legend>
92+
<span class="label">Card type</span>
93+
<abbr title="(required)">*</abbr>
94+
</legend>
95+
<ul class="choices compact">
96+
<li><input type="radio" name="card_type" id="cc-type-visa" value="Visa" checked="checked" required="required" /><label for="cc-type-visa">Visa</label></li>
97+
<li><input type="radio" name="card_type" id="cc-type-mastercard" value="MasterCard" /><label for="cc-type-mastercard">MasterCard</label></li>
98+
</ul>
99+
</fieldset>
100+
</li>
101+
102+
<li class="footer">
103+
<ol class="submit">
104+
<li><strong><input type="submit" value="Submit" /></strong></li>
105+
</ol>
106+
</li>
107+
</ol>
108+
</form>
109+
76110
</body>
77111
</html>

0 commit comments

Comments
 (0)