twitter-typeahead重复字段与引导验证冲突

时间:2018-07-05 18:15:52

标签: javascript twitter-typeahead bootstrapvalidator

我正在使用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>'
    }
  }
});

0 个答案:

没有答案