jquery validate:使用highlight或unhighlight方法运行对象方法

时间:2017-10-08 12:22:43

标签: javascript jquery jquery-validate

我正在寻找一种从highlightunhighlight方法调用对象方法的方法。我想要做的是当表单的一部分通过验证时显示验证通过或失败的图标。

我认为下面的示例代码I代表了我对this和上下文的理解上的差距。我认为我可能需要以某种方式将对象传递给highlight方法,以便setValidationIcon可以使用highlight

这个问题表明我可以覆盖highlightunhighlight,但我不确定这是否是我需要的。 Override jQuery validation highlight / unhighlight methods

此处的目标是在setValidationIconhighlight内运行unhighlight方法。现有代码不起作用,因为该方法不存在于highlight/unhighlight

的上下文中

以下是示例代码。总的来说,我知道这段代码的工作原理就像在输入的change上调用的全局对象上的函数一样。虽然代码在validate对象之外工作,但我认为它更适合在对象内部,因此它只是作为验证的一部分被调用

$("#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");
  },
});

0 个答案:

没有答案