Skip to content
This repository

Set css class of element depending on validation #473

Merged
merged 1 commit into from over 1 year ago

3 participants

Marius Cedric Dugas Marco-PHPJunky
Marius

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.

Marius Set css class of element depending on validation
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.
21f73e1
Cedric Dugas

thanks!

Cedric Dugas posabsolute merged commit aa93702 into from September 09, 2012
Cedric Dugas posabsolute closed this September 09, 2012
Marco-PHPJunky

Do you have a working example with onFieldSuccess/onFieldFailure ?
I'm trying to get this to work but i cant get it to work...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Sep 02, 2012
Marius Set css class of element depending on validation
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.
21f73e1
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 31 additions and 1 deletion. Show diff stats Hide diff stats

  1. 32  js/jquery.validationEngine.js
32  js/jquery.validationEngine.js
@@ -708,9 +708,36 @@
708 708
 			} else if (!options.isError) {
709 709
 				options.InvalidFields.splice(errindex, 1);
710 710
 			}
711  
-
  711
+				
  712
+			methods._handleStatusCssClasses(field, options);
  713
+	
712 714
 			return options.isError;
713 715
 		},
  716
+		/**
  717
+		* Handling css classes of fields indicating result of validation 
  718
+		*
  719
+		* @param {jqObject}
  720
+		*            field
  721
+		* @param {Array[String]}
  722
+		*            field's validation rules            
  723
+		* @private
  724
+		*/
  725
+		_handleStatusCssClasses: function(field, options) {
  726
+			/* remove all classes */
  727
+			if(options.addSuccessCssClassToField)
  728
+				field.removeClass(options.addSuccessCssClassToField);
  729
+			
  730
+			if(options.addFailureCssClassToField)
  731
+				field.removeClass(options.addFailureCssClassToField);
  732
+			
  733
+			/* Add classes */
  734
+			if (options.addSuccessCssClassToField && !options.isError)
  735
+				field.addClass(options.addSuccessCssClassToField);
  736
+			
  737
+			if (options.addFailureCssClassToField && options.isError)
  738
+				field.addClass(options.addFailureCssClassToField);		
  739
+		},
  740
+		
714 741
 		 /********************
715 742
 		  * _getErrorMessage
716 743
 		  *
@@ -1881,6 +1908,9 @@
1881 1908
 		onFieldFailure: false,
1882 1909
 		onFormSuccess: false,
1883 1910
 		onFormFailure: false,
  1911
+		addSuccessCssClassToField: false,
  1912
+		addFailureCssClassToField: false,
  1913
+		
1884 1914
 		// Auto-hide prompt
1885 1915
 		autoHidePrompt: false,
1886 1916
 		// Delay before auto-hide
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.