我有这个jQuery验证功能问题。验证仅适用于一次

Question

下面的功能正常工作。这是为了验证表单。总之，我有几个输入字段。如果我点击提交并且任何一个输入中都没有输入文字，则会出现验证错误。如果我填写一个字段，则只会更新一个字段。但如果我再次点击“提交”，即使没有填写第二个表单输入，else {}也会被解雇，而不是填写的if {}。}

不熟悉，但它是一个返回false;问题？

if ($('input[type="text"]:visible').val().length == 0) { 
    $('.submitModal').click(function() { 
     $('.modal').modal('show'); 
    }); 
} 
else { 
    $('.submitModal').click(function() { 
     $('.modal').modal('hide'); 
    }); 
} 

任何想法我做错了什么？

Answer 1

这是倒退的想法。绑定点击，句点。没有条件。点击后，决定你想要发生什么（即使这只意味着忽略点击）。

如果你绑定了点击，填写表单的方式不会解除绑定。即使你实际上可以解除绑定，但没有很好的理由。

如果.submitModal实际上是一个提交输入元素（而不是具有该类的锚点或按钮），而不是绑定一个点击监听器，那么绑定一个提交监听器。

基于代码的迈克自己的起点，这里有一个例子（略真实环境之外，因为我没有可用而不不必要的努力modal功能！）

$('.submitModal').click(function (e) { 
    e.preventDefault(); 
    $('input[type="text"]:visible').each(function() { 
     if ($(this).val().length == 0) {       
      $('.modal').show();       
     } 
     else { 
      $('.modal').hide(); 
     } 
    }); 
});​ 

这是不同的第一件事是我将事件传递到点击处理程序，然后preventDefault就可以了。这可以防止锚点导致页面刷新。

但我唯一做的其他事情是换出实际的.modal()调用通用jQuery .show()和.hide()只是为了概念验证的逻辑。 Mike，你写的示例代码非常棒（除了preventDefault，假设你确实想要阻止默认的锚定行为）。这里的证明：

jsfiddle.net/gnaXn/2

当所有可见的文本字段填写的“莫代尔”皮等。当他们再次清空时，“模态”重新出现。