Why is the wrong field value shown in the error message when using jQuery (remote) validation?

Question

I'm using the jQuery validation plugin in a very similar manner to the Remember The Milk demo.

$("#registrationForm").validate({
  rules: {      
    email: {
      required: true,
      email: true,
      remote: '<%=Url.Action(...) %>'
    },        
  },
  messages: {
    email: {
      required: "Please enter an email address",
      email: "Please enter a valid email address",
      remote: jQuery.format("{0} is already in use")
    }
});

The first time an invalid email (e.g. bob@mail.com) is submitted, the error message is as expected. However, if I then enter another invalid email (e.g. sue@mail.com), the validation plugin still displays "bob@mail.com is already in use."

I've traced the parameters that are reaching the controller specified in Url.Action call and they are definitely correct (i.e. "sue@mail.com" is sent as the email address when that is what is entered in the field).

Has anyone else run into this or a similar issue using the jQuery validation plugin?

Answer 1

The user name field on the Remember the Milk demo fails in the same way (when entering user names 'Peter' and 'George'), so you've probably found a bug in the plugin.

Answer 2

Over two years later and the bug still doesn't seem to be fixed, so here's what I found:

The issue is in the remote function:

remote: function(value, element, param) {
    if ( this.optional(element) )
        return "dependency-mismatch";

    var previous = this.previousValue(element);
    if (!this.settings.messages[element.name] )
        this.settings.messages[element.name] = {};
    previous.originalMessage = this.settings.messages[element.name].remote;
    this.settings.messages[element.name].remote = previous.message;

    // snip more code...
}

Trouble is that on the 2nd and later evaluations of this function, the messages[element.name].remote contains a specific (text) error message, and the actual original message is lost forever when previous.originalMessage is overwritten after that.

I was able to work around the issue by adding a check before that line:

if (!previous.originalMessage)
    previous.originalMessage = this.settings.messages[element.name].remote;

I'm not sure if this is really the correct solution, but it works - validation failures now reapply the format function on each validation failure.