第一次提交后触发验证，然后在输入元素上的每次击键后触发验证

Question

我正在对下面要讨论的所有内容使用 jquery 验证。

所以我有一个输入字段，我们称之为电子邮件。我也有这个表单的提交按钮。现在默认情况下，在我点击提交按钮之前，电子邮件字段的错误消息不会出现。然后，每当我键入它时，它都会显示/隐藏错误消息，具体取决于它是否是有效的电子邮件。每次击键都会进行此检查，这是一个非常重要的区别，以便您了解我在下面发布的问题。

现在我在输入上有一个背景色，当验证通过时它是绿色的，当它失败时是红色的。我有这部分工作，让我告诉你我是怎么做到的：

window.onload = function () {
    $(".js-validate-circle").on("input", function () {
        UpdateValidationCircle(this);
    });
}
function UpdateValidationCircle(e) {
    if ($(e).valid()) {
        $(e).parent().addClass("active");
    } else {
        $(e).parent().removeClass("active");
    }
}

active 类决定了它是绿色还是红色。我认为有些样式与问题无关，所以我不会在这里发布。

这是我的问题：当页面加载并开始输入时，它会强制触发验证，并且在我第一次单击提交按钮之前开始出现错误消息。我试图阻止这种情况。我希望只有在点击提交按钮后，开始输入的颜色才会改变。我的红色/绿色背景的功能应该与 jquery 验证消息匹配。

我将如何完成这样的事情？我尝试使用 on change 但只有当框失去焦点时才会触发验证。

Answer 1

jQuery(function($) { // DOM ready and $ alias in scope

// Cache elements
var $circle = $(".js-validate-circle");
var addedInputEvent = false; // Just a flag to know if we already added the evt listener

// On form submit....
$("#form").on("submit", function(event) {

   // Prevent default form submit
   event.preventDefault();

   // Check immediately
   $circle.each(UpdateValidationCircle);

   // If not already assigned, assign an "input" listener
   if(!addedInputEvent) {
       addedInputEvent = true;
       $circle.on("input",  UpdateValidationCircle);
   }
});

function UpdateValidationCircle() {
  var $el = $(this);
  $el.parent().toggleClass("active", $el.valid());
}

});

Answer 2

改用keyup 事件：

$(".js-validate-circle").on("keyup", function () {
...

假设.js-validate-circle 是您的输入......或者如果它是表单：

$(".js-validate-circle").on("keyup", "#id-of-the-input", function () {
...

如果这不起作用，我们将需要查看validate()s 代码和一些标记。