jquery中模糊效果触发后的回调函数

Question

我有一个表单，一旦用户“模糊”出输入字段，该表单就会被验证。所以：

$("#field1").blur(function() {

if($(this).val().length>0) {
   $(this).attr('class', 'completed');
}

});

当用户第一次访问表单时，直到所有字段都“完成”时，提交按钮是隐藏的：

$(".submit").hide();

我希望提交按钮在所有 #field1、#field2 ... 元素都被分配了“完成”后向下滑动“类（建议的任何其他方法也可以）。

我尝试使用：

$("#field1").blur(function() {
    if($(".completed").length == $("input[type='text']").length) {
        $(".submit").slideDown(1000);
    }
});

但它不起作用，因为它是与之前的“模糊”处理程序同时调用的。

是否有一种方法可以在另一个事件处理程序触发后将其绑定到？也许有一种方法可以将回调函数添加到“模糊”中？

我很感激所有类型的解决方案（不一定是我提出的那样）。

Answer 1

好吧，您不一定需要设置 css 类来执行此类验证：

$("#field1").blur(function() {
    if($("input[type='text']"),filter(isCompleted).length == $("input[type='text']").length) {
        $(".submit").slideDown(1000);
    }
});

function isCompleted(i) {
    return $(this).val().length > 0;
}

另一种方法可能是：

$("#field1").blur(function() {
    // If there are not empty textboxes, slidedown...
    if($(":text[value='']").length === 0) {
        $(".submit").slideDown(1000);
    }
});

Answer 2

只需在第一个 .blur 方法中进行检查，尽管我建议使用类名来防止页面上的任何其他输入干扰。

$(".input-field").blur(function() {
  if($(this).val().length>0) {
   $(this).addClass('completed');
  }
  setTimeout("isFormValid()", 100);
});

function isFormValid() {
  if($(".completed").length == $(".input-field").length) {
    $(".submit").slideDown(1000);
  }
}

Answer 3

怎么样：

$('input').blur(function() {
  if (this.value.length > 0)
    $(this).addClass('validationError');
  else
    $(this).removeClass('validationError');

  validateForm($(this).parents('form'));
});

funciton validateForm($form) {
  if ($form.has('.error').length > 0)
    $('.submit').slideUp();
  else
    $('.submit').slideDown();
}