javascript regex match function syntax help

Question

Hi,

I have an input textbox that runs a js function on the keyup event to match for a valid string (domain name pattern match, the regex was found on here).

I wrote the if statements to test whether the input is a valid pattern first and then more than 3 characters long.

Apparently, my ifs don't work like I wanted them to. When the input has 3 or more characters, it is fine.

But if the input is less than 3 characters, it fails the pattern regex.

Example: if the input box has "dd" (no quotes), the function will alert that I have an incorrect pattern when it SHOULD alert that the input is less than 3 characters long.

From the alert statement included, there is no extra spaces or characters in the input value.

<input id="quick" type="text" size="20" onKeyUp="test()"></input>

the function test is

function test(){

   var liveword = document.getElementById("quick").value;
   var valid = /^[a-zA-Z0-9][a-zA-Z0-9\-\_]+[a-zA-Z0-9]$/;
  alert("xxx"+liveword+"xxx");

    if (liveword.match(valid))
   {
        if (liveword.length < 3)
        {
        alert ('word less than 3');
        }
        else {
    alert ('word more than 3');
            }
     }//outside if

     else {
         alert('enter correct pattern');

     }  

} //close

TIA for your help.

Answer 1

Your first if is testing to see if the pattern is matching, regardless of length. If it is a good match, then you check length. If not, you alert "enter correct pattern".

You want to do this:

if( liveword.length < 3 )
    alert( 'too short' )

else
{
    // check patterns, alert good or bad
}

---

Edit

Your code, refactored:

function test(){

    var liveword = document.getElementById("quick").value;
    var valid = /^[a-zA-Z0-9][a-zA-Z0-9\-\_]+[a-zA-Z0-9]$/;
    alert("xxx"+liveword+"xxx");

    if( liveword.length < 3 )
        alert( 'word less than 3' );

    else
    {
        if( liveword.match(valid) )
            alert( 'good match')

        else
            alert( 'bad match' )
    } 

} //close

Answer 2

If the if (liveword.match(valid)) succeeds then that means the word is at least three characters long since your regex requires at least three characters. The if (liveword.length < 3) check will therefore never succeed located where it is. You need to move it to an else clause so that you check the length if the word doesn't match:

if (liveword.match(valid)) {
    alert ('word 3 or more');
}
else if (liveword.length < 3) {
    alert ('word less than 3');
}
else {
    alert('enter correct pattern');
}

Answer 3

As your pattern is currently written, nothing under 3 letters can ever match it. Your regex says "Find any alphanumeric, followed by at least one alphanumeric or dash or underscore, followed by a final alphanumeric."

I think you might actually want some optional matching in there instead. With:

var valid = /^[a-zA-Z0-9][a-zA-Z0-9\-\_]*[a-zA-Z0-9]?$/;

You will match on any alphanumeric, even if there is only one character. Really though, the above is the same as simply saying:

var valid = /^[a-zA-Z0-9][a-zA-Z0-9\-\_]*$/;

Note that both would still potentially match on something like a-. If that is not an intended match (i.e. you want to require a terminating alphanumeric when hyphen or dash are used), then go with:

var valid = /^[a-zA-Z0-9]([a-zA-Z0-9\-\_]*[a-zA-Z0-9])?$/;

Which says "Find one alphanumeric. If it has characters following it, it can be followed by zero or more characters that are alphanumeric or hyphens or underscores, so long as the last character is alphanumeric."