Bootstrap Token Field inputType email не работает

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(). Скрыть()

вместо

$ (e.relatedTarget) .empty(). Hide(). Attr ('data-value', '');