Set css class of element depending on validation

co-operation · co-operation · commit 21f73e1dfac2 · 2012-09-02T02:45:48.000+02:00
Desired Behavior: Elements change their appearance after validating. Eg.
input fields get a green border after sucessfull validating, or a red
one if validating fails.
Solution: This can be done simply via
declaring to css classes for sucess/failure. Currently it's possible via
functions onFieldSuccess/onFieldFailure, but it's much more easy this
way.
diff --git a/js/jquery.validationEngine.js b/js/jquery.validationEngine.js
@@ -708,9 +708,36 @@
 			} else if (!options.isError) {
 				options.InvalidFields.splice(errindex, 1);
 			}
-
+				
+			methods._handleStatusCssClasses(field, options);
+	
 			return options.isError;
 		},
+		/**
+		* Handling css classes of fields indicating result of validation 
+		*
+		* @param {jqObject}
+		*            field
+		* @param {Array[String]}
+		*            field's validation rules            
+		* @private
+		*/
+		_handleStatusCssClasses: function(field, options) {
+			/* remove all classes */
+			if(options.addSuccessCssClassToField)
+				field.removeClass(options.addSuccessCssClassToField);
+			
+			if(options.addFailureCssClassToField)
+				field.removeClass(options.addFailureCssClassToField);
+			
+			/* Add classes */
+			if (options.addSuccessCssClassToField && !options.isError)
+				field.addClass(options.addSuccessCssClassToField);
+			
+			if (options.addFailureCssClassToField && options.isError)
+				field.addClass(options.addFailureCssClassToField);		
+		},
+		
 		 /********************
 		  * _getErrorMessage
 		  *
@@ -1881,6 +1908,9 @@
 		onFieldFailure: false,
 		onFormSuccess: false,
 		onFormFailure: false,
+		addSuccessCssClassToField: false,
+		addFailureCssClassToField: false,
+		
 		// Auto-hide prompt
 		autoHidePrompt: false,
 		// Delay before auto-hide
