Twitter Bootstrap typeahead e jQuery Validate

Mi piacerebbe avere la convalida su un campo di immissione testo con Twitter Bootstrap typeahead. Così ho provato a implementarlo come segue. La convalida sul campo nome funziona correttamente. Se inizi a digitare e a cancellare di nuovo il campo, inizia la convalida. Sul campo posizione, tuttavia, che contiene data-provide="typeahead", ciò non accade. La convalida si avvia quando si fa clic sul pulsante di invio, tuttavia.Twitter Bootstrap typeahead e jQuery Validate

Ho provato a debuggarlo, ma per quanto posso vedere sia Bootstrap che jQuery Validate registrano correttamente i loro gestori di eventi. Ancora più strano, il typeahead viene installato prima di essere convalidato. Quindi ci si aspetterebbe che la typeahead venga rotta. Ma non è ...

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" 
    ] 
}

fonte

2012-10-25 Stijn Van Bael

Sì - è perché Twitter Bootstrap typeahead nasconde gli eventi dal validatore da e.stopPropagation() in funzione Typeahead.prototype.keyup()

Aggiungere un gestore keyup a #location per richiamare la convalida "manualmente", perché funzioni:

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

Esso non modificare le impostazioni di comportamento/validazione, validazione semplicemente assicurando è chiamato a tutti ..

fonte

2012-10-28 14:34:47 davidkonrad

Grazie, che funziona. Ho anche aggiunto 'onchange =" $ (this) .validate(); "' per catturare le modifiche apportate con il mouse. –

Twitter Bootstrap typeahead e jQuery Validate

risposta

Problemi correlati