6

Twitter Bootstrap の先行入力を使用してテキスト入力フィールドを検証したいと考えています。ということで、以下のように実装してみました。名前フィールドの検証は正しく機能します。入力を開始してフィールドを再度クリアすると、検証が開始されます。ただし、場所フィールドでは、これはdata-provide="typeahead"行われません。ただし、送信ボタンをクリックすると検証が開始されます。

デバッグを試みましたが、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>

場所.json:

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

1 に答える 1

4

はい-これは、TwitterBootstrapTypeaheadが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-28T14:34:47.520 に答える