4

I have a textarea where users can enter or paste email addresses of other people and send them an invite after pressing Submit button. Each email must be seperated with a comma and valid before the form is submitted - validation is taken care of by jQuery Validate plugin & multiemail method.

Problem

Some people paste email addresses directly from their email clients and those emails are often in a weird format - containing name and surname before the actual email, or the email is wrapped in < >. For example: "The Dude" <the.dude@gmail.com>, "The Dudette" <thedudette193@gmail.com>

Question

What I want to do is to Extract all email addresses from bulk text using jquery, but I'm having problems integrating this piece of code to work with my textarea - I don't know where to start.

How could I use the code from the above answer to extract each email entered into the textarea after a comma is typed or when the focus is moved away from textarea? So if I paste "The Dude" <the.dude@gmail.com> and type , after it or switch focus away, the entered value would change to the.dude@gmail.com.

Community
  • 1
  • 1
dTilen
  • 97
  • 2
  • 12
  • similar question check here for answers http://stackoverflow.com/questions/14440444/extract-all-email-addresses-from-bulk-text-using-jquery – Sunil Verma Oct 04 '13 at 11:17
  • he is referencing to the same question. In fact his question must be "how to bind an event handler to a textarea" – kasper Taeymans Oct 04 '13 at 11:30
  • reconsider validation after a comma.. you don't press comma key after the last email.. don't you want to validate it for example 2 seconds after a change was made? – Dropout Oct 04 '13 at 11:41
  • @Dropout yes, that's why I also need the when-focus-is-moved-elsewhere validation :) – dTilen Oct 04 '13 at 12:03

3 Answers3

3

you can detect when an textarea is changed (or other input field) by using an eventhandler. Jquery supports multiple events (have a look here http://api.jquery.com/category/events/). In this particular case I should use the keyup event for triggering the extractEmails function. This way your extraction will be "live". However, it is also possible by catching a blur or change event.

With keyup eventhandler

http://jsfiddle.net/kasperfish/9hLtW/5/

$('#text').on('keyup',function(event) {
    emails=extractEmails($(this).val());
    $("#emails").text(emails);
});

function extractEmails (text)
{
    return text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
}
kasper Taeymans
  • 6,950
  • 5
  • 32
  • 51
3

I'm guessing something like this :

var textarea = $('#emails');

textarea.on({
    keyup: function(e) {
        if (e.which === 188) check();
    },
    blur: check    
});

function check() {
    var val  = $.trim(textarea.val()),
        err  = '';

    if (!val.length) {
        err = 'No input ?';
        return;
    }

    var emails   = val.split(','),
        notvalid = [],
        temp     = [];

    $.each(emails, function(_,mail) {
        mail = $.trim(mail);
        if ( mail.length ) {
            var m = mail.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
            if (m) {
                temp.push(m);
            }else{
                temp.push(mail);
                notvalid.push(mail)
            }
        }else{
            temp.push(mail);
        }
        if (notvalid.length) err = 'Not valid emails : ' + notvalid.join(', ');
    });

    $('#error').html(err);
    textarea.val((temp.length ? temp : emails).join(', '));
}

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
1

This will convert the entered text to emails when you either lose focus, or enter a comma, as you requested:

function extractEmails (text)
{
    return text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
}

$("#emailtext").on('keypress blur', function(e) {

    if (e.which === 44 || e.type =="blur")
    {
        $('#emails').text(extractEmails($("#emailtext").val()));
    }
});

Here's the fiddle:

http://jsfiddle.net/Mj2KM/

B Cotter
  • 951
  • 5
  • 7