5
Twitter Bootstrapの先読みでテキスト入力フィールドの検証をしたいと思います。そこで私は以下のように実装しようとしました。名前フィールドの検証は正しく機能します。入力を開始してフィールドをもう一度クリアすると、検証が行われますが、場所フィールドにはdata-provide="typeahead"がありますが、これは起こりません。ただし、[送信]ボタンをクリックすると、検証が開始されます。Twitter Bootstrap TypeaheadとjQuery Validate
私はデバッグを試みましたが、BootstrapとjQuery Validateの両方がイベントハンドラを正しく登録していることがわかりました。見知らぬ人でさえ、先読みは検証の前にインストールされます。だから、先読が壊れることを期待するだろう。しかし、それは...ないです
の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"
]
}
..単純に確保検証が全く呼ばれ、作品のおかげで、行動/検証設定を変更doesntの。私は 'onchange =" $（this）.validate（）; "を加えて、マウスで行った変更を取得しました。 –