twitter-typeahead duplicate field conflict with bootstrap validation

[naveed520]

I'm using twitter-typeahead for suggestions on an input text field everything work fines but because of its duplication of that input field also duplicate its "data-bv-field="check" which is a bootstrap validation parameter. Now I'm Stuck on that. I don't know if this issue resolved in it or not. Any suggestions will be helpful for me. Here is my Html Code `

<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>`

Here is my javascript Code

  ` $('#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>'
     }
   }
  });

` Here is my working Js fiddle Link !!!

[Ciki]

@naveed520 have you solved it? how?

[naveed520]

I didn't solved it yet but this question is asked two years back hope this is resolved by the validator provide if you get any work around do let me know :-)