jQuery表单验证 - 成功+ showErrors

Question

我正在使用jQuery Validation Plugin，并希望在插件检测到有效或无效输入时运行我自己的代码。

我已经发现我需要的两个.validate()选项是success和showErrors ，我可以让它们都自己工作：

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

只要有效输入，就会记录success 。 showErrors也正常工作：

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

但是当我尝试将两者结合起来时，无论输入是否有效，每次都会记录error ：

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

选项的顺序没有任何影响。

有谁知道为什么这两个选项不能一起工作以及如何在有效和无效输入上运行我自己的函数？

Answer 1

只有在检测到错误时才会调用“showErrors”，无论您键入的值是什么，每次更改输入时都会调用它。

“showErrors”接收两个参数：“errorMap”和“errorList”。 要验证是否确实存在错误，您必须检查其中一个值：

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

您还可以在showErrors函数中处理“success”事件，因为它在当前验证程序上下文中被调用。

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

Answer 2

想出来......有点儿。

我用highlight替换了showErrors ，这允许我对有效或无效的条目运行回调。

但是，该插件仍然显示默认的错误消息 - 可能是因为我没有对showErrors做任何事情。 所以我不得不通过在每个字段上为消息设置一个空字符串来破解它：

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

当然不像我想的那样干净，所以如果有人有更好的方式会很棒。