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

弄明白......等等。

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

但是，该插件仍会显示默认的错误消息 - 可能是因为我没有对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');
  }
}

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

jQuery表单验证 - 成功+ showErrors

2 个答案: