Regular expression on textarea

Question

I'm having a bit of trouble validating a form I have, I can check for only letters, numbers and a full stop ("period") in a single text input, but I can't for the life of me get it to work at all on a textarea field.

in my validation I have this:

var usernamecheck = /^[A-Za-z0-9.]{5,1000}$/;

the validation I've tried that doesn't work on the textarea ($ITSWUsers) is:

if(!document.all.ITSWUsers.value.match(usernamecheck))
                {
                alert ("Please write the usernames in the correct format (with a full stop between first and last name).");
                return false;
                }

however, the following on a 'input type="text"' works just fine on the same form

if(!document.all.SFUsersName1.value.match(usernamecheck))
                {
                alert("Usernames can only contain letters, numbers and full stops (no spaces).");  
                return false;  
                }

I need it to validate usernames, 1 name per line e.g.

John.smith
Peter.jones1

these are both OK but the following wouldn't be:

John Smith
David.O'Leary
3rd.username

any help/pointers with this would be greatly appreciated (I only know basic html/php/javascript)

Does `document.all.ITSWUsers.value` return the correct value? Can you try `document.getElementById('ITSWUsers').value` instead? — Mike Christensen, May 09 '13 at 15:24
`.` is a wildcard character in Regex, so you're probably looking for `[A-Za-z0-9\.]`. There's probably an issue with whatever you're reading in, though. — Otaia, May 09 '13 at 15:26
Mike - yes, it returns the correct value, Otaia - I have added the backslash and Mike's suggestion but it still allows the form to submit. — Maff, May 09 '13 at 15:33
Also, that regular expression isn't going to *require* a period. Just anything with letters, numbers, or periods. — Mike Christensen, May 09 '13 at 15:34
@Maff - How about something like [this](http://jsfiddle.net/z5qEP/)? — Mike Christensen, May 09 '13 at 15:37
Mike, I've tried without the fullstop ( /^[A-Za-z0-9]{5,1000}$/; ) and the other part of the form that WAS validating OK before now will not allow anything with the fullstop (period) — Maff, May 09 '13 at 15:37
Can you add an example of the data that you're matching? Either by adding a breakpoint in your browser and checking the value of the element at that location or by adding an alert() or something. — Otaia, May 09 '13 at 15:38
Mike, that example works for 1 line, but it needs to validate each line (will be different usernames on every line, sorry, forgot to mention that before, that's where the problem for me lies) SpAm, it's allowing me to put in spaces and other characters and still allowing the form to be submitted, which bit of the html would you require? It's a huge and complicated form spread over many php files (using include) — Maff, May 09 '13 at 15:43
@Otaia Period is not a wildcard when it's in a character class [] When . is inside [] it matches that literal character . — MasNotsram, May 09 '13 at 15:43
@Maff - If you add the period in the regex, it's going to match anything. If you add `\.` it'll match any letters, numbers or periods. You need to make it more clear on exactly what you want. — Mike Christensen, May 09 '13 at 15:44
@Maff What is the value of `document.all.ITSWUsers.value` that you're trying to match? — Otaia, May 09 '13 at 15:46
I want it to allow: user.name (line break) user2.name - but not allow: user name (line break) user.n'ame - the user could put 1 name or 20 names (with line breaks), the usernames cannot have spaces/apostrophies etc, they can only contain letters, numbers and a period — Maff, May 09 '13 at 15:48
You need a /m after your regex to match multi-line data. Try: `/^[A-Za-z0-9.]{5,1000}$/m` Also, if you need to validate each line, you should split the string into pieces and validate each substring individually. — Otaia, May 09 '13 at 15:49
Otaia, just tried that, it still won't have it I'm afraid Thank you all for the responses by the way, it's much appreciated - I have edited my first post to show what I was wanting to validate as I cannot write over multiple lines in these comments — Maff, May 09 '13 at 15:54
@Maff - I wouldn't validate every line in one RegEx, as you'll never find which line is invalid. Unless it's a massive file, you're better off validating each line. I've added my answer below, hopefully it helps you! — Mike Christensen, May 09 '13 at 15:55
Try this extended version: `[A-Za-z0-9 _.,!\"\'\$\&\;\?@]{5,500}` from: https://stackoverflow.com/a/7233549/3102325. You can test it online: regexr.com — Marian07, Feb 04 '19 at 19:55

score 3 · Accepted Answer · answered May 09 '13 at 15:55

To validate line by line, I'd use the split function to turn each line into an array. Then, loop through the array and run your RegEx on each line. That way, you can report exactly what line is invalid. Something like this:

<textarea id="ITSWUsers"></textarea>
<button onclick="Validate()">Validate</button>

<script>
  var usernamecheck = /^[A-Za-z0-9]{5,1000}\.[A-Za-z0-9]{5,1000}$/;

  function Validate()
  {
    var val = document.getElementById('ITSWUsers').value;
    var lines = val.split('\n');

    for(var i = 0; i < lines.length; i++)
    {
      if(!lines[i].match(usernamecheck))
      {
        alert ('Invalid input: ' + lines[i] + '.  Please write the usernames in the correct format (with a full stop between first and last name).');
        return false;
      } 
    }

    window.alert('Everything looks good!');
  }
</script>

score 0 · Answer 2 · answered May 09 '13 at 16:10

I'd trim the input from the textarea using JQuery (or a JS function), and then use this regex:

/^([A-Za-z0-9]+\.[A-Za-z0-9]+(\r)?(\n)?)+$/

Like so:

function testFunc()
{
    var usernamecheck = /^([A-Za-z0-9]+\.[A-Za-z0-9]+(\r)?(\n)?)+$/;

    if(!$.trim(document.all.ITSWUsers.value).match(usernamecheck))
    {
        alert ("Please write the usernames in the correct format (with a full stop between first and last name).");
        return false;
    }
}

<textarea id="ITSWUsers" cols="50" rows="10">
John.smith
Peter.jones1
</textarea>
<button onclick="testFunc()">Click Me</button>

See it working here:

http://jsfiddle.net/DkLPB/

Regular expression on textarea

2 Answers2