Twitter Bootstrap i jQuery Validate

Chciałbym mieć sprawdzanie poprawności w polu wprowadzania tekstu za pomocą Twittera typu Bootstrap. Próbowałem więc wdrożyć to w następujący sposób. Sprawdzanie poprawności w polu nazwy działa poprawnie. Jeśli zaczniesz go wpisywać i ponownie wyczyścić pole, rozpocznie się sprawdzanie poprawności. Jednak w polu lokalizacji, które ma na sobie data-provide="typeahead", tak się nie stanie. Sprawdzanie poprawności rozpoczyna się po kliknięciu przycisku przesyłania.Twitter Bootstrap i jQuery Validate

Próbowałem debugowania go, ale o ile widzę, zarówno Bootstrap, jak i jQuery Validate poprawnie rejestrują swoje programy obsługi zdarzeń. Nawet nieznajomy, typeahead jest instalowany przed sprawdzeniem poprawności. Tak więc można by się spodziewać, że złodziej zostanie zepsuty. Ale to nie jest ...

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

Źródło

2012-10-25 Stijn Van Bael

Tak - to dlatego, Twitter Bootstrap wpisywanie znaków z wyprzedzeniem ukrywa zdarzenia z walidatora przez e.stopPropagation() w funkcja Typeahead.prototype.keyup()

Dodaj program do obsługi klucza do #location, aby wywołać sprawdzanie poprawności "ręcznie", aby działał:

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

robi to zmienić ustawienia zachowanie/walidacji, wystarczy po prostu zapewnienie poprawności nazywany jest w ogóle ..

Źródło

2012-10-28 14:34:47 davidkonrad

Dzięki, że działa. Dodałem również 'onchange =" $ (this) .validate(); "', aby przechwytywać zmiany dokonane za pomocą myszy. –

Twitter Bootstrap i jQuery Validate

Odpowiedz

Powiązane problemy