I'm using the jQuery Validation Plugin and want to run my own code when the plugin detects a valid or invalid input.

I've figured out that the two .validate() options I need are success and showErrors and I can get them both to work on their own:

var validator = $('#form').validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
success: function() {
  console.log('success');
}

That logs success any time a valid input is made. And showErrors works correctly also:

var validator = $('#form').validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
showErrors: function() {
  console.log('error');
}

But when I try to bine the two, error is logged every time regardless of whether the input is valid:

var validator = $('#form').validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
success: function() {
  console.log('success');
},
showErrors: function() {
  console.log('error');
}

The order of the options doesn't have any effect.

Does anyone know why the two options don't work together and how I can run my own functions on valid and invalid inputs?

I'm using the jQuery Validation Plugin and want to run my own code when the plugin detects a valid or invalid input.

I've figured out that the two .validate() options I need are success and showErrors and I can get them both to work on their own:

var validator = $('#form').validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
success: function() {
  console.log('success');
}

That logs success any time a valid input is made. And showErrors works correctly also:

var validator = $('#form').validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
showErrors: function() {
  console.log('error');
}

But when I try to bine the two, error is logged every time regardless of whether the input is valid:

var validator = $('#form').validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
success: function() {
  console.log('success');
},
showErrors: function() {
  console.log('error');
}

The order of the options doesn't have any effect.

Does anyone know why the two options don't work together and how I can run my own functions on valid and invalid inputs?

• javascript
• jquery
• validation
• jquery-validate

• I'm having issues with this as well. While the highlight/unhighlight below is helpful, that's not exactly what I want to achieve. showErrors is nice because it gives you the errors as a parameter. Highlight/unhighlight have a separate use case. Would be nice to be able to bine the two. – getWeberForStackExchange Commented Oct 29, 2013 at 1:36

2 Answers 2

"showErrors" is not called just when an error is detected, it's called everytime you change the input, regardless the value you typed.

"showErrors" receives two parameters: "errorMap" and "errorList". To verify if there really was an error you have to check one of those values:

showErrors: function(errorMap, errorList) {
  if (errorsList.length > 0) {
    console.log('error');
  }
}

You can also handle the "success" event inside the showErrors function, since it's called in the current validator context.

showErrors: function(errorMap, errorList) {
  if (errorsList.length == 0) {
    this.currentElements.addClass("success");
  }
}

Figured it out... sort of.

I replaced showErrors with highlight, which allows me to run a callback on either valid or invalid entries.

However, the plugin still displays the default error messages -- probably since I'm not doing anything with showErrors. So I had to hack that by setting an empty string for the message on each field:

var validator = $('#form').validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: '',
    email: ''
  },
  success: function() {
    console.log('success');
  },
  highlight: function() {
    console.log('highlight');
  }
}

Certainly not as clean as I would like, so if anyone has a better way that would be great.