I'm using the following tag-it plugin: /.

I would like to validate the tags, the input would be email addresses. How can I do this?

My 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:['ma', '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);
}
        });
        });

I added my code to JSFiddle.

I'm using the following tag-it plugin: http://widen.github.io/jQuery-Tagit/.

I would like to validate the tags, the input would be email addresses. How can I do this?

My 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:['ma', '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);
}
        });
        });

I added my code to JSFiddle.

• javascript
• jquery
• tag-it

• possible duplicate of Validate email address in JavaScript? – ohaal Commented May 14, 2014 at 8:59
• 1 The tags are not really relevant for this question. You are asking how to validate e-mails in JavaScript, and that has already been asked. – ohaal Commented May 14, 2014 at 9:00
• Hi, thanks for your response. I would like to know how to validate the tags. – user2862120 Commented May 14, 2014 at 9:07
• 1 Maybe you should remove the email part from the question. But in that case an obvious question pops up: have you read the documentation? Have you tried the callbacks provided there? If they did not work, or you have problems with them, please add details. – kapa Commented May 14, 2014 at 9:26
• 1 @ Kapa Thanks for your help. I'm very new to jquery, I have checked the documentation and tried a few things but I can't seem to figure out what to do. I updated my code to things I have tried. – user2862120 Commented May 14, 2014 at 9:55

1 Answer 1

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:['ma', '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);
        }

    });