मैं ट्विटर बूटस्ट्रैप टाइपहेड के साथ एक टेक्स्ट इनपुट फ़ील्ड पर सत्यापन करना चाहता हूं। तो मैंने इसे निम्नानुसार कार्यान्वित करने की कोशिश की। नाम फ़ील्ड पर सत्यापन सही तरीके से काम करता है। यदि आप इसमें टाइप करना शुरू करते हैं और फिर फ़ील्ड को साफ़ करते हैं, तो सत्यापन में शामिल होता है। स्थान फ़ील्ड पर, जिसमें data-provide="typeahead" है, ऐसा नहीं होता है। हालांकि जब आप सबमिट बटन पर क्लिक करते हैं तो प्रमाणीकरण लाता है।ट्विटर बूटस्ट्रैप टाइपहेड और jQuery मान्य
मैंने इसे डीबग करने का प्रयास किया, लेकिन जहां तक मैं बूटस्ट्रैप और jQuery वैलिडेट दोनों को अपने ईवेंट हैंडलर को सही तरीके से पंजीकृत कर सकता हूं। यहां तक कि अजनबी, टाइपहेड वैध होने से पहले स्थापित किया गया है। तो कोई टाइपहेड टूटा जाने की उम्मीद करेगा। लेकिन यह नहीं है ...
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"
]
}
धन्यवाद, कि काम करता है। मैंने माउस के साथ किए गए परिवर्तनों को कैप्चर करने के लिए 'onchange = "$ (this)। Validate();" 'भी जोड़ा है। –