Core: Added support for button elements with descendants (jquery-validation#1901)

phistuck · staabm · commit cce5ac8268c4 · 2017-01-28T12:55:17.000+01:00
Non-Firefox browsers dispatch "click" on descendants of <button>, which breaks the submitHandler logic that adds a hidden field with the name and value of the submit button (since it is not included in the submission if it did not initiate the submission, which might be the case when using form.submit in submitHandler and returning false). submitButton is instead a descendant of <button> and the hidden field does not compensate for the lack of an actual submit button. This would fix crbug.com/668524 and make submitButton an actual button. * Added HTML for button with descendants test For testing that clicking on descendants of a button element still keeps the button element as the submit button. * Added a test for button with descendants support For testing that clicking on descendants of a button element still keeps the button element as the submit button. * Removed an extraneous submission from the test Accidental copy-paste. * Fixed some style warning Forgot to wrap the parenthesized value with spaces. * Fixed a style warning Forgot to wrap a parenthesized value with spaces. * Fixed a style warning Forgot to add a blank line above a comment. * Fixed the button with descendants test Replaced a complex event initiation with a basic click(). * Fixed a style warning Removed extraneous trailing spaces. * Fixed some style warnings Removed two unused variables. * Fixed a submitButton regression Instead of returning a DOM element, a jQuery element was returned. Changed to return the original element in the target is already a button case. * Simplified the button with descendants support Instead of looking for the parent or ancestor of the target, just used the currentTarget property. * Added another test Devised by @Arkni.
diff --git a/src/core.js b/src/core.js
@@ -27,7 +27,7 @@ $.extend( $.fn, {
 
 			this.on( "click.validate", ":submit", function( event ) {
 				if ( validator.settings.submitHandler ) {
-					validator.submitButton = event.target;
+					validator.submitButton = event.currentTarget;
 				}
 
 				// Allow suppressing validation by adding a cancel class to the submit button
diff --git a/test/index.html b/test/index.html
@@ -435,6 +435,10 @@ <h3></h3>
 			<option value="2016">2016</option>
 		</select>
 	</form>
+	<form id="testForm27">
+		<input name="year"/>
+		<button name="submitForm27" value="someValue" type="submit"><span>Submit</span></button>
+	</form>
 </div>
 </body>
 </html>
diff --git a/test/test.js b/test/test.js
@@ -397,6 +397,50 @@ QUnit.test( "submitHandler keeps submitting button", function( assert ) {
 	$( "#userForm" ).submit();
 } );
 
+QUnit.test( "submitHandler keeps submitting button, even if descendants are clicked", function( assert ) {
+	var button;
+
+	$( "#testForm27" ).validate( {
+		debug: true,
+		submitHandler: function( form ) {
+
+			// Dunno how to test this better; this tests the implementation that uses a hidden input
+			var hidden = $( form ).find( "input:hidden" )[ 0 ];
+			assert.deepEqual( hidden.value, button.value );
+			assert.deepEqual( hidden.name, button.name );
+
+			return false;
+		}
+	} );
+	$( "#testForm27 [name=\"year\"]" ).val( "2016" );
+	button = $( "#testForm27 :submit" )[ 0 ];
+	$( button ).find( "span" ).click();
+} );
+
+QUnit.test( "submitHandler keeps submitting button", function( assert ) {
+	var button = $( "#testForm27 :submit" )[ 0 ];
+	var v = $( "#testForm27" ).validate( {
+		debug: true,
+		submitHandler: function( form ) {
+
+			// Compare the button with the `submitButton` property
+			assert.deepEqual(
+				v.submitButton, button, "The submitButton property should be the same as button"
+			);
+
+			var hidden = $( form ).find( "input:hidden" )[ 0 ];
+			assert.deepEqual( hidden.value, button.value );
+			assert.deepEqual( hidden.name, button.name );
+
+			return false;
+		}
+	} );
+
+	$( "#testForm27 [name=\"year\"]" ).val( "2016" );
+
+	$( button ).find( "span" ).click();
+} );
+
 QUnit.test( "validation triggered on radio/checkbox when using keyboard", function( assert ) {
     assert.expect( 1 );
 	var input, i, events, triggeredEvents = 0,

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ $.extend( $.fn, {`
`27`	`27`
`28`	`28`	`this.on( "click.validate", ":submit", function( event ) {`
`29`	`29`	`if ( validator.settings.submitHandler ) {`
`30`		`- validator.submitButton = event.target;`
	`30`	`+ validator.submitButton = event.currentTarget;`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`// Allow suppressing validation by adding a cancel class to the submit button`