From ddaed1ccb5768478c480e331ff7ca57f19a6197a Mon Sep 17 00:00:00 2001
From: Brahim Arkni <Arkni@users.noreply.github.com>
Date: Tue, 14 Feb 2017 20:36:31 +0000
Subject: [PATCH] Core: assign rules to contenteditable via `.validate()` and
 `.rules()` (#1947)

Fixes #1946
---
 src/core.js     | 13 ++++++++++++-
 test/index.html |  5 +++++
 test/test.js    | 52 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/core.js b/src/core.js
index 8ca8b9e..8ceb40f 100644
--- 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
index 4cef67b..80beb7c 100644
--- a/test/index.html
+++ b/test/index.html
@@ -439,6 +439,11 @@
 		<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
index f7d0726..412bae5 100644
--- 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 ) {