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

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 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
Cedric Dugas
Owner

thanks!

Cedric Dugas posabsolute merged commit aa93702 into from
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. Marius

    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
32 js/jquery.validationEngine.js
View
@@ -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.