Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Set css class of element depending on validation #473

Merged
merged 1 commit into from

3 participants

@co-operation

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.

@co-operation co-operation 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
@posabsolute
Owner

thanks!

@posabsolute posabsolute merged commit aa93702 into posabsolute:master
@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
Commits on Sep 2, 2012
  1. @co-operation

    Set css class of element depending on validation

    co-operation authored
    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.
This page is out of date. Refresh to see the latest.
Showing with 31 additions and 1 deletion.
  1. +31 −1 js/jquery.validationEngine.js
View
32 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
Something went wrong with that request. Please try again.