0

I looking for a way to call an object method from the highlight and unhighlight methods. What I am trying to do is display a validation passed or failed icon when a section of a form passes validation.

The sample code I below I beieve represents gaps in my understanding of this and context. I think that I may need to somehow pass in the object to the highlight method so that setValidationIcon is available to highlight.

This issue suggests that possibly I could override highlight and unhighlight, but I am not sure if that is what I need. Override jQuery validation highlight / unhighlight methods

The goal here is to run the setValidationIcon method from within highlight and unhighlight. Existing code does not work because the method do not exist within the context of or within highlight/unhighlight

Here is the sample code. Overall, I know this code works as I had it all as functions on the global object that were being called on change of an input. While the code works outside of the validate object, I believe it is more appropriate for it be within the object so that it simply get called as part of validation

$("#register-form").validate({
  highlight: function(element, errorClass) {
      this.setValidationIcon(this);
  },

  unhighlight: function(element, errorClass) {
    this.setValidationIcon(this);
  },

  setValidationIcon: function(that) {
    var li = that.closest("li");
    var formSectionId = "#" + that.closest(".form-section").id;

    if(allValid(formSectionId)) {
      this.showPassed($(li));
    } else {
      this.showWarning($(li));
    }
  },

  allValid: function(formSectionId) {
    var required = $(formSectionId).find("input[required]");
    var valid = true;

    for(var i = 0; i < required.length; i++) {
      element = $(required[i]);
      if(!element.valid()) valid = false;
    }
    return valid;
  },

  showPassed: function(element) {
    element.children("#passed").removeClass("hide");
    element.children("#empty").addClass("hide");
    element.children("#error").addClass("hide");
  },

  showWarning: function(element) {
    element.children("#passed").addClass("hide");
    element.children("#error").removeClass("hide");
    element.children("#empty").addClass("hide");
  },
});
Sparky
  • 98,165
  • 25
  • 199
  • 285
dtburgess
  • 613
  • 5
  • 19
  • 1
    You've told us in the question what you're trying to do, but not what the actual issue is, or what you're trying to achieve. Could you edit the question to give a clearer indication of exactly *what* method you're trying to run, and *what* you want it to do. – Rory McCrossan Oct 08 '17 at 12:27
  • You got some alternative : One overwriting the plugin as extends the validate jquery plugin or use "remote:" to validate something inside a method as attribute. http://jqueryvalidation.org/remote-method/#options –  Oct 08 '17 at 12:43
  • @RoryMcCrossan I have updated the question to further clarify. Thank you for the feedback. – dtburgess Oct 08 '17 at 13:18
  • There are no such options called `showWarning`, `showPassed`, `allValid`, or `setValidationIcon` that are part of this plugin. Therefore you cannot put these inside of the `.validate()` method and expect anything to happen. – Sparky Oct 08 '17 at 22:11
  • @sparky I am attempting to use the highlight and unhighlight callbacks to execute some custom methods that I have added to the validate object. That didn't work, so what I ended up doing was creating methods outside of validate and calling them with event listeners on my inputs. Still though, I can't help but think there is a way to add methods to validate and call them from within an instance of validation execution. – dtburgess Oct 09 '17 at 13:22
  • `highlight` and `unhighlight` are only meant to be used for adding/removing **styling** classes depending on invalid/valid... for example, if you need to flag the parent container and such. It's in no way meant to be used for calling custom methods. If you have custom methods, then these are considered as rules and declared the same as other rules, within the `rules` object for example. Then the highlighting, etc. all happens automatically, no different than any other rule. – Sparky Oct 09 '17 at 17:07

0 Answers0