我想在Twitter Bootstrap typeahead的文本输入字段上进行验证.所以我尝试按如下方式实现它.名称字段上的验证正常工作.如果您开始输入并再次清除该字段,则验证将启动.但是,在位置字段上,其上有data-provide =“typeahead”,这不会发生.但是,当您单击“提交”按钮时,确认会启动.
我试过调试它,但据我所知,Bootstrap和jQuery Validate都正确地注册了它们的事件处理程序.更奇怪的是,在验证之前安装了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"
]
}
解决方法
是的 – 这是因为Twitter Bootstrap Typeahead在函数Typeahead.prototype.keyup()中通过e.stopPropagation()隐藏来自验证器的事件
将一个keyup-handler添加到#location以“手动”调用验证,以使其工作：
<input type="text" id="location" name="location" autocomplete="off" data-provide="typeahead" onkeyup="$(this).validate();" data-url="locations.json" />
它不会改变行为/验证设置,只是简单地确保调用验证.