fix google earth issue with invalid radio buttons

Gruntfile.js

@@ -45,7 +45,10 @@ module.exports = function( grunt ) {
 		},
 		// code quality tasks
 		qunit: {
-			unit: [ 'test/**/*.html' ],
+			unit: [
+				'test/*.html',
+				'!test/google-earth.html'
+			],
 			// test other jquery versions
 			jquery: {
 				options: {

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "html5.constraintValidationAPI",
   "title": "HTML5 constraintValidationAPI",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "https://github.com/bboyle/html5-constraint-validation-API",
   "authors": [
     "Ben Boyle <benjamins.boyle@gmail.com>"

dist/html5.constraintValidationAPI.js

@@ -1,6 +1,6 @@
-/*! HTML5 constraintValidationAPI - v1.0.3 - 2014-04-03
-* https://github.com/bboyle/html5-constraint-validation-API
-* Copyright (c) 2014 Ben Boyle; Licensed MIT */
+/*! HTML5 constraintValidationAPI - v1.0.4 - 2015-02-02
+* https://github.com/bboyle/html5-constraint-validation-API
+* Copyright (c) 2015 Ben Boyle; Licensed MIT */
 /*exported initConstraintValidationAPI*/
 if ( jQuery !== 'undefined' ) {
 	(function( $ ) {
@@ -15,10 +15,16 @@ if ( jQuery !== 'undefined' ) {
 			candidateForValidation = 'input, select, textarea',
 
 			// for feature detection
-			input = $( '<input>' ),
+			input = $( '<input>' ).get( 0 ),
 
 			// polyfill test
-			polyfill = typeof input[ 0 ].validity !== 'object',
+			polyfill = typeof input.validity !== 'object',
+
+
+			// invalid fields filter
+			isInvalid = function() {
+				return ! ( this.disabled || this.validity.valid );
+			},
 
 
 			// manage validity state object
@@ -146,14 +152,24 @@ if ( jQuery !== 'undefined' ) {
 				}
 
 				// NOTE the code below runs in all browsers to polyfill implementation bugs
-				// e.g. Opera 11 on OSX fires submit event even when fields are invalid
+
+				// google earth treats all required radio buttons as invalid
+				// if the only thing stopping submission is a required radio button group...
+				invalid = form.find( candidateForValidation ).filter( isInvalid );
+				if ( invalid.length === invalid.filter( ':radio' ).length && invalid.length === invalid.filter(function() {
+					// radio button has been checked, but is flagged as value missing
+					return this.validity.valueMissing && $( this.form.elements[ this.name ]).filter( ':checked' ).length > 0;
+				}).length ) {
+					// let submission continue
+					invalid.removeAttr( 'required' );
+				}
+
+				// Opera 11 on OSX fires submit event even when fields are invalid
 				// correct implementations will not invoke this submit handler until all fields are valid
 
 				// unless @novalidate
 				// if there are invalid fields
-				if ( ! novalidate && form.find( candidateForValidation ).filter(function() {
-					return ! ( this.disabled || this.validity.valid );
-				}).length > 0 ) {
+				if ( ! novalidate && form.find( candidateForValidation ).filter( isInvalid ).length > 0 ) {
 					// abort submit
 					event.stopImmediatePropagation();
 					event.preventDefault();
@@ -185,7 +201,7 @@ if ( jQuery !== 'undefined' ) {
 				}
 
 				// INPUT validitationMessage
-				if ( typeof input[ 0 ].validationMessage !== 'string' ) {
+				if ( typeof input.validationMessage !== 'string' ) {
 					// set us up the API
 					candidates.filter(function() {
 						return typeof this.validationMessage !== 'string';
@@ -195,7 +211,7 @@ if ( jQuery !== 'undefined' ) {
 				}
 
 				// INPUT checkValidity
-				if ( typeof input[ 0 ].checkValidity !== 'function' ) {
+				if ( typeof input.checkValidity !== 'function' ) {
 					// set us up the API
 					candidates.filter(function() {
 						return typeof this.checkValidity !== 'function';
@@ -217,7 +233,7 @@ if ( jQuery !== 'undefined' ) {
 				}
 
 				// INPUT setCustomValidity
-				if ( typeof input[ 0 ].setCustomValidity !== 'function' ) {
+				if ( typeof input.setCustomValidity !== 'function' ) {
 					// set us up the API
 					candidates.filter(function() {
 						return typeof this.setCustomValidity !== 'function';

libs/jquery-loader.js

@@ -1,6 +1,6 @@
 (function() {
   // Default to the local version.
-  var path = '../bower_components/jquery/dist/jquery.js';
+  var path = '../node_modules/jquery/dist/jquery.js';
   // Get any jquery=___ param from the query string.
   var jqversion = location.search.match(/[?&]jquery=(.*?)(?=&|$)/);
   // If a version was specified, use that version from code.jquery.com.

package.json

@@ -2,7 +2,7 @@
   "name": "html5.constraintValidationAPI",
   "title": "HTML5 constraintValidationAPI",
   "description": "A polyfill for the HTML5 constraintValidationAPI",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "https://github.com/bboyle/html5-constraint-validation-API",
   "author": {
     "name": "Ben Boyle",
@@ -29,6 +29,9 @@
   "directories": {
     "test": "test"
   },
+  "dependencies": {
+    "jquery": "^2.1.3"
+  },
   "devDependencies": {
     "grunt": "~0.4.5",
     "grunt-contrib-clean": "~0.6.0",

src/html5.constraintValidationAPI.js

@@ -19,10 +19,16 @@ if ( jQuery !== 'undefined' ) {
 			candidateForValidation = 'input, select, textarea',
 
 			// for feature detection
-			input = $( '<input>' ),
+			input = $( '<input>' ).get( 0 ),
 
 			// polyfill test
-			polyfill = typeof input[ 0 ].validity !== 'object',
+			polyfill = typeof input.validity !== 'object',
+
+
+			// invalid fields filter
+			isInvalid = function() {
+				return ! ( this.disabled || this.validity.valid );
+			},
 
 
 			// manage validity state object
@@ -150,14 +156,24 @@ if ( jQuery !== 'undefined' ) {
 				}
 
 				// NOTE the code below runs in all browsers to polyfill implementation bugs
-				// e.g. Opera 11 on OSX fires submit event even when fields are invalid
+
+				// google earth treats all required radio buttons as invalid
+				// if the only thing stopping submission is a required radio button group...
+				invalid = form.find( candidateForValidation ).filter( isInvalid );
+				if ( invalid.length === invalid.filter( ':radio' ).length && invalid.length === invalid.filter(function() {
+					// radio button has been checked, but is flagged as value missing
+					return this.validity.valueMissing && $( this.form.elements[ this.name ]).filter( ':checked' ).length > 0;
+				}).length ) {
+					// let submission continue
+					invalid.removeAttr( 'required' );
+				}
+
+				// Opera 11 on OSX fires submit event even when fields are invalid
 				// correct implementations will not invoke this submit handler until all fields are valid
 
 				// unless @novalidate
 				// if there are invalid fields
-				if ( ! novalidate && form.find( candidateForValidation ).filter(function() {
-					return ! ( this.disabled || this.validity.valid );
-				}).length > 0 ) {
+				if ( ! novalidate && form.find( candidateForValidation ).filter( isInvalid ).length > 0 ) {
 					// abort submit
 					event.stopImmediatePropagation();
 					event.preventDefault();
@@ -189,7 +205,7 @@ if ( jQuery !== 'undefined' ) {
 				}
 
 				// INPUT validitationMessage
-				if ( typeof input[ 0 ].validationMessage !== 'string' ) {
+				if ( typeof input.validationMessage !== 'string' ) {
 					// set us up the API
 					candidates.filter(function() {
 						return typeof this.validationMessage !== 'string';
@@ -199,7 +215,7 @@ if ( jQuery !== 'undefined' ) {
 				}
 
 				// INPUT checkValidity
-				if ( typeof input[ 0 ].checkValidity !== 'function' ) {
+				if ( typeof input.checkValidity !== 'function' ) {
 					// set us up the API
 					candidates.filter(function() {
 						return typeof this.checkValidity !== 'function';
@@ -221,7 +237,7 @@ if ( jQuery !== 'undefined' ) {
 				}
 
 				// INPUT setCustomValidity
-				if ( typeof input[ 0 ].setCustomValidity !== 'function' ) {
+				if ( typeof input.setCustomValidity !== 'function' ) {
 					// set us up the API
 					candidates.filter(function() {
 						return typeof this.setCustomValidity !== 'function';

test/google-earth.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en-AU">
+<head>
+	<meta charset="UTF-8">
+	<title>google earth tests · Constraint Validation API tests</title>
+
+	<!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
+	<script src="../libs/jquery-loader.js"></script>
+	<!-- Load local lib and tests. -->
+	<script src="../src/html5.constraintValidationAPI.js"></script>
+
+	<style>
+	:invalid:before {
+		display: block;
+		content: "invalid";
+		color: red;
+	}
+	</style>
+</head>
+
+<body>
+
+
+	<p>This form is for testing validation in the google earth internal browser.
+	You should be able to submit this form (and be taken to this repo home page).</p>
+
+	<form action="https://github.com/bboyle/html5-constraint-validation-API" action>
+
+		<ol class="questions">
+
+			<li>
+				<fieldset>
+					<legend>
+						<span class="label">Radio foo</span>
+						<abbr title="(required)">*</abbr>
+					</legend>
+					<ul class="choices">
+						<li>
+							<input type="radio" name="radioFoo" value="foo" id="radio-foo-foo" required>
+							<label for="radio-foo-foo">Foo</label>
+						</li>
+						<li>
+							<input type="radio" name="radioFoo" value="bar" id="radio-foo-bar">
+							<label for="radio-foo-bar">Bar</label>
+						</li>
+						<li>
+							<input type="radio" name="radioFoo" value="" id="radio-foo-BLANK">
+							<label for="radio-foo-BLANK">BLANK</label>
+						</li>
+						<li>
+							<input type="radio" name="radioFoo" value="undefined" id="radio-foo-undefined">
+							<label for="radio-foo-undefined">undefined</label>
+						</li>
+						<li>
+							<input type="radio" name="radioFoo" value="null" id="radio-foo-null">
+							<label for="radio-foo-null">null</label>
+						</li>
+					</ul>
+				</fieldset>
+			</li>
+
+			<li class="footer">
+				<ol class="submit">
+					<li>
+						<strong>
+							<input type="submit" value="Submit">
+						</strong>
+					</li>
+				</ol>
+			</li>
+
+		</ol>
+	</form>
+
+
+</body>
+</html>

test/required.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en-AU">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="UTF-8">
 	<title>required tests · Constraint Validation API tests</title>
 
 	<!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
@@ -73,19 +73,19 @@
 								<label for="radio-foo-foo">Foo</label>
 							</li>
 							<li>
-								<input type="radio" name="radioFoo" value="bar" id="radio-foo-bar" />
+								<input type="radio" name="radioFoo" value="bar" id="radio-foo-bar">
 								<label for="radio-foo-bar">Bar</label>
 							</li>
 							<li>
-								<input type="radio" name="radioFoo" value="" id="radio-foo-BLANK" />
+								<input type="radio" name="radioFoo" value="" id="radio-foo-BLANK">
 								<label for="radio-foo-BLANK">BLANK</label>
 							</li>
 							<li>
-								<input type="radio" name="radioFoo" value="undefined" id="radio-foo-undefined" />
+								<input type="radio" name="radioFoo" value="undefined" id="radio-foo-undefined">
 								<label for="radio-foo-undefined">undefined</label>
 							</li>
 							<li>
-								<input type="radio" name="radioFoo" value="null" id="radio-foo-null" />
+								<input type="radio" name="radioFoo" value="null" id="radio-foo-null">
 								<label for="radio-foo-null">null</label>
 							</li>
 						</ul>
@@ -109,7 +109,7 @@
 					<ol class="submit">
 						<li>
 							<strong>
-								<input type="submit" value="Submit" />
+								<input type="submit" value="Submit">
 							</strong>
 						</li>
 					</ol>
@@ -119,6 +119,5 @@
 		</form>
 	</div>
 
-
 </body>
 </html>