I'd use the tagsChanged
callback to detect when a new tag has been added, and then validate, and remove it if not valid. I see you've used beforeTagAdded
- I'm not sure where you've got that from? But I don't know the plugin.
The below code does the job. 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);
}
});