Question

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

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

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

});

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

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

一旦所有＃field1，＃field2 ...元素都被分配了一个“已完成”的类（我建议的任何其他方法都可以使用），我希望将提交按钮设置为slideDown。

我尝试使用：

$("#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();
}

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

3 个答案: