Valider les balises en utilisant tagit

Question

J'utilise le tag-it suivant: http://widen.github.io/jQuery-Tagit/.

Je voudrais valider les tags, l'entrée serait des adresses email. Comment puis-je faire ceci?

Mon code:

HTML

<div id="editOnClick" class="example"> 
    <ul name="email[]" id="email"></ul> 
</div> 

JavaScript (jQuery)

$(document).ready(function() { 
     $('#editOnClick > ul').tagit({ 
      select:true, 
      triggerKeys:['comma', 'enter', 'space', 'semicolon', 'tab'], 
      tagSource:"view_email_get_emails.php", 
      editOnClick:true 
      beforeTagAdded: function(event, ui) { 
       return isEmail($('#email').tagit("tags"))} 

}); 

function isEmail(email) { 
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
    return regex.test(email); 
} 
     }); 
     }); 

j'ai ajouté mon code à JSFiddle.

Answer 1

J'utiliserais le rappel tagsChanged pour détecter le moment où une nouvelle balise a été ajoutée, puis la valider et la supprimer si elle n'est pas valide. Je vois que vous avez utilisé beforeTagAdded - Je ne sais pas d'où vous venez? Mais je ne connais pas le plugin.

Le code ci-dessous fait le travail. Updated JSFiddle

$(document).ready(function() { 
     $('#editOnClick > ul').tagit({ 
      select:true, 
      triggerKeys:['comma', 'enter', 'space', 'semicolon', 'tab'], 
      tagSource:"view_email_get_emails.php", 
      editOnClick:true, 
      tagsChanged: function(tagValue, action, element){ 
       if (action == 'added'){ 
        if (!isEmail(tagValue)){ 
         $('#editOnClick > ul').tagit("remove", 'tag', tagValue); 

        } 
       } 

      }); 


     function isEmail(email) { 
      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
      return regex.test(email); 
     } 

    });