我想使用 Twitter Bootstrap typeahead 对文本输入字段进行验证。所以我尝试如下实现它。名称字段的验证工作正常。如果您开始输入并再次清除该字段，则会启动验证。但是，在位置字段data-provide="typeahead"上，它不会发生这种情况。但是，当您单击提交按钮时，验证确实会启动。
我尝试调试它，但据我所知，Bootstrap 和 jQuery Validate 都正确注册了它们的事件处理程序。更奇怪的是，预输入是在验证之前安装的。因此，人们会期望 typeahead 会被破坏。但它不是...
索引.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>
位置.json：
{
"locations": [
"Berlin",
"London",
"Madrid",
"New York",
"Paris"
]
}