1

I have a textarea that contains multiple email addresses with a ; separated delimiter. We have a requirement to highlight invalid email addresses red using JavaScript or jQuery.

For example: I have 10 email addresses separated by commas in the textarea and 3 are invalid so these email addresses should be highlighted red and the user will be able to identify invalid email-addresses easily.

NakedBrunch
  • 48,713
  • 13
  • 73
  • 98
sunil patekar
  • 11
  • 4

2 Answers2

2

See the following jsFiddle for a working example.

As others have said, you cannot do this with a Textarea. However, you can create a div, style it to look like your other form elements, and set the ContentEditable property to True. With a bit of Javascript, you'll have exactly what you're looking for.

The following code will loop through the list of semi-colon delimited email addresses and use regex to test each address. If there is no match, the text is wrapped in a span and assigned a "red" class. The resulting new HTML is then applied to the contenteditable div and users will see the invalid email addreses highlighted

JS

$('#btnSubmit').click(function() {
    var textEntered = $('#divEdit').text();
    var textResult = [];
    $.each(textEntered.split(';'), function(index, item) {
        if (item.match(/^\S+@\S+\.\S+$/)) {
            textResult.push(item);
        }
        else {
            textResult.push('<span class="red">' + item + '</span>');
        }
    });
    $('#divEdit').html(textResult.join(';'));
});

When a user submits the form, all you need to do is get the HTML of the contenteditable div and strip out and HTML and you'll be left with only the text of the entered email address.

Note: There are many challenges in trying to uses regex to validate email address (Using a regular expression to validate an email address). Be careful in what you're trying to achieve.

Community
  • 1
  • 1
NakedBrunch
  • 48,713
  • 13
  • 73
  • 98
1

Agreeing with the comments that the question is lacking much necessary information, there are some possible options depending on the need and scope. Here is an example that demonstrates 2 options: either split the valid and invalid email addresses into 2 different text areas, or use a div to display the result and hide the textarea form controls. Again, without knowing anything about where the list is coming from, how it's being validated, etc, this is just a stab:

Good luck

HTML

<form name="test" id="test">
<textarea name="valid" id="valid"></textarea><br />
<textarea name="invalid" id="invalid" style="color:red;"></textarea>
</form>
<div id="ta_sudo"></div>

SCRIPT

function processEmailAddresses(){
    var addList = 'abc@123.com;www@www.com;t@d.cor;t.dd.www';
    separateInvalid(addList);
}

function separateInvalid(addList){
    var addArr = addList.split(';');
    var validArr = [];
    var invalidArr = [];
    var compositeArr = [];
    for(var i = 0; i < addArr.length; i++){
        if(!testEmail(addArr[i])){
            invalidArr.push(addArr[i]);
            compositeArr.push('<span style="color:red">' + addArr[i]) + '</span>';
        }else{
            validArr.push(addArr[i]);
            compositeArr.push(addArr[i]);
        }
    }
    $('#valid').val(validArr.join(';'));
    $('#invalid').val(invalidArr.join(';'));
    $('#ta_sudo').html(compositeArr.join(';'))

}

function testEmail(emailAddress){
    var regexEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    return regexEmail.test(emailAddress);
}

processEmailAddresses();
bphillips
  • 459
  • 2
  • 5