如何验证组中的单独字段? jQuery验证

时间:2020-05-13 02:53:27

标签: jquery-validate

我有两个输入字段:first_namelast_name。我确认它们为波纹管:

rules: {
  required: true,
  maxlength: 50
},
groups : {
      name : "first_name last_name"
    },
    errorElement: "p",
    errorPlacement:  function(error, element) {
      let errorContainer = getErrorContainer(element);
      if($(errorContainer).attr("class") != "error_container") {
        element.parent("div.required").append($('<div class="error_container"></div>'));
        errorContainer = getErrorContainer(element);
      }
      $(errorContainer).append(error);
      function getErrorContainer(element){
          return element.parent("div.required").children("div.error_container");
      }
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass(errorClass).removeClass(validClass);
      $(element).css("background-color", "#ffd0e0");
      //$(element).css("color", "black");

      $(element).parent("div.required").children("div.error_container").children("p").removeClass("ok").addClass("error");
      $(element).parent("div.required").parent("td").css("background-color", "#ffeded");
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass(errorClass).addClass(validClass);
      $(element).css("background-color", "white");

      $(element).parent("div.required").children("div.error_container").children("p").css("display", "block");
      $(element).parent("div.required").children("div.error_container").children("p").removeClass("error").addClass("ok");
      $(element).parent("div.required").children("div.error_container").children("p").html("OK");

      if($(element).parent("div.required").parent("td").children("div.required").children("div.error_container").children("p.error").length == 0){
        $(element).parent("div.required").parent("td").css("background-color", "#fff");
      }
    }

当前,我遇到一个问题,如果first_name满足规则(例如:maxlength <50)并且last_name出现错误,那么验证器将始终返回ok状态。原因是:highlightunhighlight同时被激活,并且unhighlight覆盖highlight。我希望在这种情况下,如果我触发last_name字段,那么验证程序会为我提供错误状态,并且如果first_name处于确定状态。我怎样才能做到这一点?我正在使用jquery-validation 1.19.1注意:名称组只有一条错误消息。

1 个答案:

答案 0 :(得分:1)

您不应该针对具体情况使用groups选项,并且根据您所显示的内容,我认为您可能误解了该选项的预期目的。

例如,当使用require_from_group方法时,将在一组字段上获得多个相同的错误消息,这是不理想的。 groups选项通过为该组字段显示一条错误消息而不是重复的相同消息来解决此问题。

因此,除非您使用require_from_group或类似方法,否则应删除groups选项。