Bootstrap 令牌字段 inputType 电子邮件无效

Question

我正在使用 bootstrap 和 Token Field 插件来获取多封电子邮件。我已经这样提到了。

<input type="email" id="token-friend-email" class="friend-email form-control input-border input-style" value="" placeholder="" required>

和

$('#token-friend-email').tokenfield({
    inputType : 'email',
    delimiter:';'

});

但是令牌字段接受所有类型的输入。我只想接受电子邮件类型。帮我解决这个问题。

Answer 1

DEMO 检查这个演示

Html部分

<input type="text" class="form-control" id="tokenfield" value="" />

这是 jquery 部分...

$('#tokenfield')

  .on('tokenfield:createtoken', function (e) {
    var data = e.attrs.value.split('|')
    e.attrs.value = data[1] || data[0]
    e.attrs.label = data[1] ? data[0] + ' (' + data[1] + ')' : data[0]
  })

  .on('tokenfield:createdtoken', function (e) {
    // Über-simplistic e-mail validation
    var re = /\S+@\S+\.\S+/
    var valid = re.test(e.attrs.value)
    if (!valid) {
      $(e.relatedTarget).addClass('invalid')
    }
  })

  .on('tokenfield:edittoken', function (e) {
    if (e.attrs.label !== e.attrs.value) {
      var label = e.attrs.label.split(' (')
      e.attrs.value = label[0] + '|' + e.attrs.value
    }
  })

  .on('tokenfield:removedtoken', function (e) {
    alert('Token removed! Token value was: ' + e.attrs.value)
  })

  .tokenfield()

Answer 2

我使用了相同的@shri，但我做了一些修改。

使用

$(e.relatedTarget).empty().hide().attr('data-value', '');

而不是这个

$(e.relatedTarget).addClass('invalid')

DEMO 检查这个演示

Html部分

<input type="text" class="form-control" id="tokenfield" value="" />

这是 jquery 部分...

$('#tokenfield')

  .on('tokenfield:createtoken', function (e) {
    var data = e.attrs.value.split('|')
    e.attrs.value = data[1] || data[0]
    e.attrs.label = data[1] ? data[0] + ' (' + data[1] + ')' : data[0]
  })

  .on('tokenfield:createdtoken', function (e) {
    // Über-simplistic e-mail validation
    var re = /\S+@\S+\.\S+/
    var valid = re.test(e.attrs.value)
    if (!valid) {
      $(e.relatedTarget).addClass('invalid')
    }
  })

  .on('tokenfield:edittoken', function (e) {
    if (e.attrs.label !== e.attrs.value) {
      var label = e.attrs.label.split(' (')
      e.attrs.value = label[0] + '|' + e.attrs.value
    }
  })

  .on('tokenfield:removedtoken', function (e) {
    alert('Token removed! Token value was: ' + e.attrs.value)
  })

  .tokenfield()

Answer 3

嗨@shri 我试过用这个我们也可以使用这个

$(e.relatedTarget).empty().hide()

而不是

$(e.relatedTarget).empty().hide().attr('data-value', '');

Bootstrap 令牌字段 inputType 电子邮件无效

Bootstrap Token Field inputType email is not working

twitter-bootstrap

validation

email

bootstrap-tokenfield