Twitter Bootstrap typeahead和jQuery驗證

我想通過Twitter Bootstrap typeahead對文本輸入字段進行驗證。所以我嘗試瞭如下實現。名稱字段驗證工作正常。如果您開始輸入並再次清除該字段，則會啓動驗證。然而，在位置字段上，其上有data-provide="typeahead"，這不會發生。然而，當你點擊提交按鈕時，驗證確實會啓動。Twitter Bootstrap typeahead和jQuery驗證

我試着調試它，但據我所見，Bootstrap和jQuery Validate都正確地註冊它們的事件處理程序。更奇怪的是，typeahead是在驗證之前安裝的。所以人們可能會認爲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" 
    ] 
}

來源

2012-10-25 Stijn Van Bael

是 - 這是因爲Twitter的引導在事先鍵入的內容隱藏驗證事件的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-28 14:34:47 davidkonrad

謝謝，這工作。我還添加了'onchange =「$（this）.validate（）;」'來捕獲鼠標所做的更改。 –

Twitter Bootstrap typeahead和jQuery驗證

回答

相關問題