jQuery表单验证-成功+显示错误

jQuery Form Validation - success + showErrors

本文关键字：显示 错误 -成功 表单 验证 jQuery      更新时间：2023-09-26

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

我已经发现我需要的两个.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');
}

选项的顺序没有任何效果。

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

"showErrors"不是在检测到错误时才调用的，它是在每次更改输入时调用的，无论您键入的值是多少。

"showErrors"接收两个参数："errorMap"answers"errorList"。要验证是否真的有错误，你必须检查其中一个值：

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

您还可以在showErrors函数中处理"成功"事件，因为它是在当前验证器上下文中调用的。

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

想好了。。。有点。

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

当然没有我想要的那么干净，所以如果有人有更好的方法那就太好了。

相关文章：