我正在使用twitter-typeahead在输入文本字段上提出建议,一切正常,但是由于该输入字段的重复,因此也复制了它的“ data-bv-field =“ check”,这是一个引导验证参数,并且提交时会给它带来validation.min.js错误,现在我被卡住了。任何建议对我都会有帮助。
这是我的工作 Js fiddle 链接!!!
这是我的HTML代码 `
<div class="form-group">
<input type="text" class="form-control" name="last" placeholder="Last Name" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" name="email" placeholder="Email" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" name="phone" placeholder="Phone" value="" />
</div>
<div class="form-group">
<input class="typeahead form-control" id="check" name="check" placeholder="Enter to Search" />
</div>
<input type="submit" class="btn btn-primary" value="Update" />
</form>`
这是我的JavaScript代码
$('#update-form').bootstrapValidator({
trigger: 'change',
fields: {
check: {
validators: {
notEmpty: {
message: 'Your City Country is required'
}
}
},
first: {
validators: {
notEmpty: {
message: 'Your first name is required'
},
regexp: {
regexp: /^[a-zA-Z ]+$/,
message: 'Your first name cannot have numbers or symbols'
}
}
},
last: {
validators: {
notEmpty: {
message: 'Your last name is required'
},
regexp: {
regexp: /^[a-zA-Z ]+$/,
message: 'Your last name cannot have numbers or symbols'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'The phone number is required'
},
regexp: {
regexp: /^\+?1?([()/\.\-\s]*[0-9]){10}\s*((ext|x)\s*[0-9]+)*$/,
message: 'The input is not a valid US phone number'
}
}
}
}
})
.on('error.field.bv', '[name="phone"]', function(e, data) {
// change the data-bv-trigger value to keydown
$(e.target).attr('data-bv-trigger', 'keydown');
// destroy the plugin
// console.info(data.bv.getOptions());
data.bv.destroy();
// console.info(data.bv.getOptions());
// initialize the plugin
$('#update-form').bootstrapValidator(data.bv.getOptions());
});
var jsonData = [{
country: "Holland",
city: "Amsterdam"
}, {
country: "Belgium",
city: "Brussel"
}, {
country: "Germany",
city: "Berlin"
}, {
country: "France",
"city": "Paris"
}];
var dataSource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country', 'city'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: jsonData
});
dataSource.initialize();
$('.typeahead').typeahead({
minLength: 1,
highlight: true
}, {
name: 'countries',
display: function(item) {
return item.country + '–' + item.city
},
source: dataSource.ttAdapter(),
templates: {
empty: [
'<div class="empty">No Matches Found</div>'
].join('\n'),
header: '<div><h5><table width="100%" border="1"><thead><tr><th width="50%" align="center">Item Name</th><th width="50%" align="center">City Name</td></th></table></h5></div>',
suggestion: function(data) {
return '<div><table width="100%" border="1"><tr><td width="50%" align="right">' + data.country + '</td><td width="50%">' + data.city + '</td></tr></table></div>'
}
}
});