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验证消息匹配。

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

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()代码和一些标记。

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

2 个答案: