Tôi muốn có xác nhận trên một trường nhập văn bản với kiểu gõ Twitter Bootstrap. Vì vậy, tôi đã cố gắng thực hiện nó như sau. Việc xác thực trên trường tên hoạt động chính xác. Nếu bạn bắt đầu gõ vào nó và xóa trường một lần nữa, xác nhận đá. Trong trường địa điểm tuy nhiên, trong đó có data-provide="typeahead" trên đó, điều này không xảy ra. Quá trình xác thực sẽ khởi động khi bạn nhấp vào nút gửi tuy nhiên.Twitter Bootstrap typeahead và jQuery Validate
Tôi đã thử gỡ lỗi nó, nhưng theo như tôi có thể thấy cả Bootstrap và jQuery Validate đăng ký trình xử lý sự kiện của họ một cách chính xác. Ngay cả người lạ, các typeahead được cài đặt trước khi xác nhận. Vì vậy, người ta sẽ mong đợi typeahead bị phá vỡ. Nhưng nó không phải là ...
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"
]
}
Cảm ơn, mà làm việc. Tôi cũng đã thêm 'onchange =" $ (this) .validate(); "' để nắm bắt các thay đổi được thực hiện bằng chuột. –