Assistance with a custom jquery validate error message function

Question

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/

If this code works, and you want to know how to make it better, then codereview.stackexchange.com is a better SE site for this question. — Matt Ball
– Matt Ball, Commented Jan 16, 2013 at 14:26

Sparky · Accepted Answer · 2013-01-16 16:46:21Z

1

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/

answered Jan 16, 2013 at 16:46

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tjans Over a year ago

I guess I was working for a more global way rather than having to repeat myself over and over. My way results in less code. I usually stay away from the explicit jquery validate setup in the constructor as I prefer inline code (class="required phoneUS"). At least, that's how I initially began using jqValidate. Is it more common practice to do it the way you offered? I just always thought it was cleaner to do it with less script code, but I'm definitely open to changing my style.

Sparky Over a year ago

@tjans: "More clean" only depends on what you're trying to do. Your question said nothing about how many forms or fields... you simply provided an example with one form and two inputs (and way too much code for only two inputs). Mine is definitely cleaner for that type of scenario. As far as "common practice"... I've seen custom messages done a lot of ways, yet your method is a first for me. Maybe it's really the best way for this particular usage, but that's not for me to decide.

Collectives™ on Stack Overflow

Assistance with a custom jquery validate error message function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related