Core: assign rules to contenteditable via .validate() and .rules() (jquery-validation#1947)

Arkni · staabm · commit ddaed1ccb576 · 2017-02-14T21:36:31.000+01:00
Fixes jquery-validation#1946
diff --git a/src/core.js b/src/core.js
@@ -121,7 +121,16 @@ $.extend( $.fn, {
 			settings, staticRules, existingRules, data, param, filtered;
 
 		// If nothing is selected, return empty object; can't chain anyway
-		if ( element == null || element.form == null ) {
+		if ( element == null ) {
+			return;
+		}
+
+		if ( !element.form && element.hasAttribute( "contenteditable" ) ) {
+			element.form = this.closest( "form" )[ 0 ];
+			element.name = this.attr( "name" );
+		}
+
+		if ( element.form == null ) {
 			return;
 		}
 
@@ -384,6 +393,7 @@ $.extend( $.validator, {
 				// Set form expando on contenteditable
 				if ( !this.form && this.hasAttribute( "contenteditable" ) ) {
 					this.form = $( this ).closest( "form" )[ 0 ];
+					this.name = $( this ).attr( "name" );
 				}
 
 				var validator = $.data( this.form, "validator" ),
@@ -620,6 +630,7 @@ $.extend( $.validator, {
 				// Set form expando on contenteditable
 				if ( this.hasAttribute( "contenteditable" ) ) {
 					this.form = $( this ).closest( "form" )[ 0 ];
+					this.name = name;
 				}
 
 				// Select only the first element for each name, and only those with rules specified
diff --git a/test/index.html b/test/index.html
@@ -439,6 +439,11 @@ <h3></h3>
 		<input name="year"/>
 		<button name="submitForm27" value="someValue" type="submit"><span>Submit</span></button>
 	</form>
+	<form id="_contenteditableForm">
+		<div name="first_name" id="first_name" contenteditable placeholder="First Name"></div>
+		<br>
+		<input type="text" name="something" id="_something" />
+	</form>
 </div>
 </body>
 </html>
diff --git a/test/test.js b/test/test.js
@@ -1262,6 +1262,58 @@ QUnit.test( "works on contenteditable fields on input event", function( assert )
 	assert.noErrorFor( $( "#contenteditableRequiredValid" ) );
 } );
 
+QUnit.test( "Assign rules to contenteditable via .validate() method", function( assert ) {
+	assert.expect( 2 );
+	var form = $( "#_contenteditableForm" );
+	var v = form.validate( {
+		rules: {
+			first_name: {
+				required: true
+			},
+			something: {
+				required: true
+			}
+		}
+	} );
+	var firstNameRules = $( "#first_name", form ).rules();
+	var expectedRules = { required: true };
+
+	assert.deepEqual(
+		firstNameRules, expectedRules, "The rules should be the same"
+	);
+
+	v.form();
+
+	assert.equal( v.numberOfInvalids(), 2, "The form has two errors" );
+} );
+
+QUnit.test( "Assign rules to contenteditable via .rules() method", function( assert ) {
+	assert.expect( 2 );
+	var form = $( "#_contenteditableForm" );
+	var v = form.validate( {
+		rules: {
+			something: {
+				required: true
+			}
+		}
+	} );
+
+	$( "#first_name", form ).rules( "add", {
+		required: true
+	} );
+
+	var firstNameRules = $( "#first_name", form ).rules();
+	var expectedRules = { required: true };
+
+	assert.deepEqual(
+		firstNameRules, expectedRules, "The rules should be the same"
+	);
+
+	v.form();
+
+	assert.equal( v.numberOfInvalids(), 2, "The form has two errors" );
+} );
+
 QUnit.module( "misc" );
 
 QUnit.test( "success option", function( assert ) {
