Twitter Bootstrap typeahead и jQuery Validate

Я хотел бы иметь проверку на поле ввода текста с помощью Twitter Bootstrap typeahead. Поэтому я попытался реализовать его следующим образом. Проверка в поле имя работает правильно. Если вы начнете вводить текст и снова очистите поле, начнется проверка. Однако в поле location, которое имеет data-provide="typeahead" на нем, этого не происходит. Однако проверка срабатывает, когда вы нажимаете кнопку Отправить.

Я попытался отладить его, но, насколько я могу видеть, и Bootstrap, и jQuery проверяют правильно регистрируйте их обработчики событий. Еще более странно, что typeahead устанавливается перед проверкой. Так что можно было бы ожидать, что 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"
    ]
}
1 5
twitter-bootstrap jquery-validate typeahead

1 ответ:

Да-это потому, что Twitter Bootstrap Typeahead скрывает события от валидатора с помощью e.stopPropagation() в функции Typeahead.prototype.keyup()

Добавьте обработчик keyup в #location, чтобы вызвать проверку "вручную", чтобы она работала: 

<input type="text" id="location" name="location" autocomplete="off" 
 data-provide="typeahead" onkeyup="$(this).validate();" data-url="locations.json" />

Он не изменяет настройки поведения / проверки, просто просто гарантирует, что проверка вызывается вообще..

3