CODEWITHSUNDEEP
jquery-validate
tjans
tjans

Reputation: 1554

Assistance with a custom jquery validate error message function

We have a rule that all of our validation messages must be in a summary, and thus the default "this field is required" doesn't cut it because the messages lose their context in a summary and therefore need specific field indicators.

I have a solution that I like rather well, but it soon became clear that there was a need for messages outside of just the required field (email, url, custom methods like phoneUS, etc), so I made some additions to my function.

I've been using jQuery for a while, but I'm not an expert in the optimization area, so I wanted to get some expert help on whether the function below could be optimized...my question is, "is there actually a better way to handle custom error messages in a summary?"

$('.required, .email').each(function(index) {
  var $this = $(this);

  var label = (
    $this.is(':radio')
    ? $("label[data-name='"+$this.attr('name')+"']")
    : label = $("label[for='"+$this.attr('id')+"']")
  );

  var customMessages = [{}];

  if($this.hasClass('required')){
    customMessages.required = "'" + label.text() + "' is required.";
  }

  if($this.hasClass('email')){
    customMessages.email = "'" + label.text() + "' has an invalid email address.";
  }

  $this.rules("add", {
    messages: customMessages
  });
});

Here is the jsFiddle: http://jsfiddle.net/GD5nw/1/

Upvotes: 0

Views: 907

Answers (1)

Sparky
Sparky

Reputation: 98738

So why not just assign the custom message on a field-by-field basis for each field as is most typically done? It seems less verbose than what you've been doing.

http://docs.jquery.com/Plugins/Validation/validate#toptions

Example for input elements with name attribute assigned as first, second, and address.

$('#myform').validate({
    rules: {
        first: {
            required: true
        },
        second: {
            required: true
        },
        address: {
            required: true,
            digits: true // just an example
        }
    },
    messages: {
        first: {
            required: "your first name is required"
        },
        second: {
            required: "your last name is required"
        },
        address: {
            required: "your address is required",
            digits: "must only use digits on address"
        }
    }
});

Working Demo: http://jsfiddle.net/x4YBw/

Upvotes: 1

Related Questions