twitter-bootstrap – Twitter Bootstrap typeahead和jQuery Validate

我想在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" />

它不会改变行为/验证设置,只是简单地确保调用验证.

twitter-bootstrap – Twitter Bootstrap typeahead和jQuery Validate

解决方法

猜你在找的Bootstrap相关文章