Twitter Bootstrap typeahead和jQuery验证

我想通过Twitter Bootstrap typeahead对文本输入字段进行验证。所以我尝试了如下实现。名称字段验证工作正常。如果您开始输入并再次清除该字段，则会启动验证。然而，在位置字段上，其上有data-provide="typeahead"，这不会发生。然而，当你点击提交按钮时，验证确实会启动。Twitter Bootstrap typeahead和jQuery验证

我试着调试它，但据我所见，Bootstrap和jQuery Validate都正确地注册它们的事件处理程序。更奇怪的是，typeahead是在验证之前安装的。所以人们可能会认为typeahead会被打破。但它不是...

的index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script> 
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('[data-provide="typeahead"]').each(function() { 
     var url = $(this).attr('data-url'); 
     $(this).typeahead({ 
      source : function(query, process) { 
       return $.get(url, { 
        name : query 
       }, function(data) { 
        var json = JSON.parse(data); 
        return process(json.locations); 
       }); 
      }, 
      items : 5 
     }); 
    }); 
    $('#settings-form').validate({ 
     rules: { 
      name: { 
       required: true 
      }, 
      location: { 
       required: true 
      } 
     }, 
     highlight: function(label) { 
      var controlGroup = $(label).closest('.control-group'); 
      controlGroup.addClass('error'); 
      var buttons = controlGroup.find('button'); 
      buttons.addClass('btn-danger'); 
      buttons.attr('disabled', 'disabled'); 
     }, 
     success: function(label) { 
      var controlGroup = $(label).closest('.control-group'); 
      controlGroup.removeClass('error'); 
      var buttons = controlGroup.find('button'); 
      buttons.removeClass('btn-danger'); 
      buttons.removeAttr('disabled'); 
     }, 
     errorPlacement: function(error, element) { 
      error.appendTo(element.closest('.control-group')); 
     } 
    }); 
}); 
</script> 
<style type="text/css"> 
body { 
    margin: 20px; 
} 
label.error { 
    margin-left: 160px; 
    margin-bottom: 0; 
} 
</style> 
</head> 
<body> 
    <form id="settings-form" class="form-horizontal" action="#" method="GET"> 
     <fieldset> 
      <div class="control-group"> 
       <label class="control-label" for="name">Name</label> 
       <div class="controls"> 
        <input type="text" id="name" name="name" autocomplete="off" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="location">Location</label> 
       <div class="controls"> 
        <input type="text" id="location" name="location" autocomplete="off" data-provide="typeahead" data-url="locations.json" /> 
       </div> 
      </div> 
     </fieldset> 
     <div class="control-group"> 
      <div class="controls"> 
       <button class="btn" data-dismiss="modal">Cancel</button> 
       <button class="btn btn-primary" type="submit">Save changes</button> 
      </div> 
     </div> 
    </form> 
</body> 
</html>

locations.json：

{ 
    "locations": [ 
     "Berlin", 
     "London", 
     "Madrid", 
     "New York", 
     "Paris" 
    ] 
}

来源

2012-10-25 Stijn Van Bael

是 - 这是因为Twitter的引导在事先键入的内容隐藏验证事件的e.stopPropagation()函数Typeahead.prototype.keyup()

添加密钥处理程序到#location以调用验证“手动”，因为它的工作：

<input type="text" id="location" name="location" autocomplete="off" 
data-provide="typeahead" onkeyup="$(this).validate();" data-url="locations.json" />

它不改变行为/验证设置，只是简单地确保验证被称为所有..

来源

2012-10-28 14:34:47 davidkonrad

谢谢，这工作。我还添加了'onchange =“$（this）.validate（）;”'来捕获鼠标所做的更改。 –

Twitter Bootstrap typeahead和jQuery验证

回答

相关问题