CODEWITHSUNDEEP
jquery-validate
DinhNgocHien
DinhNgocHien

Reputation: 717

How to validate separate field in group? jQuery validation

I have two input fields: first_name and last_name. I validate them as bellow:

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");
      }
    }

Currently, I got a problem that if first_name satisfies the rule(ex: maxlength < 50) and last_name got error, then the validator always return ok status. The reason is: highlight and unhighlight were activated at the same time, and unhighlight overrides highlight. I expect that in this case if I trigger the last_name field then validator gives me error status, and if first_name ok status. How can I do this? I'm using jquery-validation 1.19.1. note: only one error message for name group.

Upvotes: 0

Views: 222

Answers (1)

Sparky
Sparky

Reputation: 98718

You should not be using the groups option for your situation, and based on what you've shown, I think you might have misunderstood the intended purpose of this option.

For example, when using the require_from_group method, one would get multiple identical error messages on a set of fields, which is not ideal. The groups option solves this problem by showing one error message for this set of fields instead of the duplicate identical messages.

So unless you're using the require_from_group or a similar method, you should remove the groups option.

Upvotes: 1

Related Questions