[SOLVED] playing with Perl Compatible Regex in field validation

eon201 · #1 (**permalink**) Oct 25th, 2007, 13:30

The field validation never ends!

So at the moment the code currently rips any non numerical character and replaces it with literally nothing. It then checks to see if the entry is a number and if not raises an alert. then with if else commands the javascript checks to see that the number is no greater or less than 11 digits long.

The code looks like this:

Code: Select all

    document.callmeback_form.telephone.value = document.callmeback_form.telephone.value.replace(/\D/g, "");
    
    if (document.callmeback_form.telephone.value == "" || isNaN(parseInt(document.callmeback_form.telephone.value)))
    {
    alert ( "Please enter your number (inc. area code)." );
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border= "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width= "132px";
    document.callmeback_form.telephone.style.height= "15px";
    return false;
    } 
    else if (document.callmeback_form.telephone.value.length < 11)
    {
    alert ("The number you have entered is too short, please check and try again");
    return false;
    }
    else if (document.callmeback_form.telephone.value.length > 11)
    {
    alert ("The number you have entered is too long, please check and try again");
    return false;
    }

What i need it to do on top of this now is:

1.let the '+' character through when replacing characters.

2.If the '+' is not the first character in the sequence after this then raise an alert.

3.If it is the first character and is followed by '44' then return true if not then raise an alert.

4.Allow a 14 digit number to return true only if it starts with '0044'

Any ideas??

Thanks again for all of the help so far. If I notice that anyone has posted something I can help with I will definetly pitch in. Dan.

eon201 · #2 (**permalink**) Oct 25th, 2007, 15:13

anyone??? Im still stuck on this.

c010depunkk · #3 (**permalink**) Oct 25th, 2007, 19:00

Here's a little test page I wrote. See if you can run with this regex:

HTML: Select all

<html>
<body>
<script type="text/javascript">
function regexTest() {
    if(document.getElementById('blub').value.match(/^(\+44[0-9]{9}|0044[0-9]{10})$/)) {
        alert('match');
    } else {
        alert('no match');
    }
}
</script>
<form onsubmit="return false;">
<input type="text" id="blub" />
<input type="button" onclick="regexTest();" value="check match" />
</form>
</body>
</html>

eon201 · #4 (**permalink**) Oct 26th, 2007, 10:21

Im building a phone number field validation. Its getting there but im running into problems.
Please take into account im builiding it only for the uk. so +44 and +0044 interntaional call numbers apply!

Ok so far my code is at this state..

Code: Select all

var temp = document.callmeback_form.telephone.value;
    
    if (temp=="") 
    {
    alert("Please enter your number (inc. area code).");
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
    return false;
    }
    
    else if (temp.length == 14 && temp.subStr(0,3)!="0044") 
    {
    alert("Invalid number.");
    return false;
    }
        
    else if (temp.length == 13 && temp.subStr(0,2)!="+44") 
    {
    alert("Invalid number.");
    return false;
    }
    
    else if (temp.length == 11 && temp.subStr(0)!="0") 
    {
    alert("Invalid number.");
    return false;
    }

    else if (temp.length < 11) 
    {
    alert("The number you have entered is too short, please check and try again.");
    return false;
    }
    
    else if (temp.length > 11) 
    {
    alert("The number you have entered is too long, please check and try again.");
    return false;

At the moment the field works for.

1. a alert if you enter nothing

2. lets through 0044**********

3. lets through +44**********

4. lets through 0**********

5. Throws up an error if the number is under 11 characters (if it applies to rule number 4)

6. Throws up an alert if the number is over 11 characters (if it applies to rule number 4)

But. The strange thing is, that it will:

accept any number for the 0044 rule eg.3546

accept any number for the +44 rule eg.+55

accept any character

accept any number for the 0 rule eg 1

I cant see why. Can anyone else???

Rakuli · #5 (**permalink**) Oct 26th, 2007, 10:37

Have you tried c010depunk's regex from above? It will do a validation on all you need to check at once.

The code would look something like

Code: Select all

var temp = document.callmeback_form.telephone.value;
    
    if (!temp.match(/^(\+44[0-9]{9}|0044[0-9]{10})$/)) 
    {
    alert("Enter a valid UK Phone number including area code");
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
    return false;
    }

c010depunkk · #6 (**permalink**) Oct 26th, 2007, 10:39

Amen, bro. Regex RockZ!!!

eon201 · #7 (**permalink**) Oct 26th, 2007, 10:44

yes that would work. But i need seperate alert boxes to make the user aware of where they have made the mistake. You would of thought they could just figure that out themselves. Stupid users!!!

I think my problems boil down to this chunk of code...

Code: Select all

else if (temp.length == 14 && temp.subStr(0,3)!="0044") 
	{
    alert("Invalid number.");
    return false;
    }
		
	else if (temp.length == 13 && temp.subStr(0,2)!="+44") 
	{
    alert("Invalid number.");
    return false;
    }
	
	else if (temp.length == 11 && temp.subStr(0)!="0") 
	{
    alert("Invalid number.");
    return false;
    }

they return true when needed. Yet refuse to return false and create the alert. I just cant see why!!

Rakuli · #8 (**permalink**) Oct 26th, 2007, 10:53

Don't capitalise the second 's' in subStr.

Use temp.substr(0,2) etc....

PS. I would place an example number next to the field then fail the submission if it didn't match the regex... The user can see the example if they are wondering how to enter it.

eon201 · #9 (**permalink**) Oct 26th, 2007, 10:58

You know Rakuli you were right with the regex stuff i think now. But I have a question about the way that works...

Code: Select all

if (!temp.match(/^(\+44[0-9]{9}|0044[0-9]{10})$/))

the [0-9] part - is this the characters allowed to be entered??
the {9} part - is this the number of characters allowed???

this does seem like the best way to do it as I can just add...

Code: Select all

    else if (temp.length < 11) 
	{
    alert("The number you have entered is too short, please check and try again.");
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
	return false;
    }
	
    else if (temp.length > 11) 
	{
    alert("The number you have entered is too long, please check and try again.");
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
	return false;
    }

after it.
thanks dan.

Rakuli · #10 (**permalink**) Oct 26th, 2007, 11:03

Hi eon201,

Thanks go to c010depunkk for the regex, I just popped it in your code

..

You know you wouldn't even need the second part of the code as the match checks that the post is the right length...

But I guess if you *need* the user to see that they can't remember their number it can't hurt.. lol

eon201 · #11 (**permalink**) Oct 26th, 2007, 11:16

Im sorry about this. You guys must be sick of me now.

so currently the code works and looks like this!!!

Code: Select all

    var temp = document.callmeback_form.telephone.value;
        
    if (!temp.match(/^(\+44[0-9]{10}|0044[0-9]{10}|0[0-9]{10})$/)) 
    {
    alert("Enter a valid UK Phone number including area code");
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
    return false;
    }

But now that I try to make the parts that alert the user when the enter to many or to few numbers it goes all wrong.

I just want them to get an alert if they put more than 13 characters in for +44 , 14 characters for 0044 , and 11 characters for hte normal 0 number.

im actually starting to get this javascript malarky. although I think you boys are safely well ahead of me!!

Thanks AGAIN. Dan.

c010depunkk · #12 (**permalink**) Oct 26th, 2007, 11:18

here comes a regex explanation:
"/" --> start deliminator

"^" --> anchor at the beginning of the string
"(" --> open IF statement
"\+44" --> literal character string "+44"
"[0-9]{9}" --> match 9 digits
"|" --> OR
"0044" --> literal character string "0044"
"[0-9]{10}" --> match 10 digits
")" --> close IF statement
"$" --> anchor end of string
"/" --> end deliminator

eon201 · #13 (**permalink**) Oct 26th, 2007, 11:25

ok when when you say "[0-9]{10}" --> match 10 digits your telling javascript to expect 10 digits after the literal character string??

Rakuli · #14 (**permalink**) Oct 26th, 2007, 11:27

LOL - tag team..

Yep, that's exactly what this is doing.

It's not a character string per se, it's a character class.

It is the characters 0-9

eon201 · #15 (**permalink**) Oct 26th, 2007, 11:30

yay! ive got something right! lol

Any ideas on how to get the code to check if the numbers are to long or short from this point now??

thanks. Dan.

Rakuli · #16 (**permalink**) Oct 26th, 2007, 11:32

The thing is that the regex will check the pattern and if the patter matches the string will be the correct length.

If you wanted you could throw in one more (possibly redundant) check.

Code: Select all

   

 var temp = document.callmeback_form.telephone.value;
        
    if (!temp.match(/^(\+44[0-9]{10}|0044[0-9]{10}|0[0-9]{10})$/) || temp.length < 12 || temp.length > 14) 
    {
    alert("Enter a valid UK Phone number including area code");
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
    return false;
    }

eon201 · #17 (**permalink**) Oct 26th, 2007, 11:37

Ah ive seen what you have done. But the three different number styles have different numbers of characters overall. eg. a +44 number has 13 characters whilst the 0044 number has 14 , and the normal entry has just 11. T
his is why its such a pain. Especially when I have to warn the user when the value is below or above the correct number!!

Thanks.Dan

eon201 · #18 (**permalink**) Oct 26th, 2007, 11:49

anyone now how to implement the less or more than function when using the regex, but have different values for each number type???

Also ive added another number type in and i have broken the code

Code: Select all

    if (!temp.match(/^(\+44[0-9]{10}|0044[0-9]{10}|0[0-9]{10}|+353[0-9]{8})$/))

Have I messed up the syntax???

Rakuli · #19 (**permalink**) Oct 26th, 2007, 11:49

Do you have to though? lol...

If it's really required, can do your length checks after the match fails..

Code: Select all

   

 var temp = document.callmeback_form.telephone.value;
        
    if (!temp.match(/^(\+44[0-9]{10}|0044[0-9]{10}|0[0-9]{10})$/) ) 
    {
        // Okay so the first match failes.. let's see why
               alert("Enter a valid UK Phone number including area code");


          if (temp.match(/^+44/) && temp.length != 13)
             alert ("Numbers with this prefix (+44) need 13 characters");
          if (temp.match(/^0044/) && temp.length != 14)
             alert ("Numbers with the prefix (0044) need 14 characters.");
          else if (temp.length != 11)
              alert ("Numbers including area code should be 11 characters");


    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
    return false;
    }

eon201 · #20 (**permalink**) Oct 26th, 2007, 12:23

Hey Rakuli, it's me AGAIN.

can you have a look at this for me... For some reason that I cant spot the problem. The only alerts that seems to work are the first two.. why is this?? Have I done something stupid again???

Code: Select all

var temp = document.callmeback_form.telephone.value;
      
     if (temp=="")
     {
     alert("Enter a valid UK Phone number including area code");
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
    return false;
    }
      
    if (!temp.match(/^(\+44[0-9]{10}|0044[0-9]{10}|0[0-9]{10})$/) ) 
    {


          if (temp.match(/^(\+44)$/) && temp.length < 13)
             {
             alert("The number you have entered with this prefix (+44) is too short, please check and try again");
                return false;
             }
             
          if (temp.match(/^(\+44)$/) && temp.length > 13)
             {
             alert("The number you have entered with this prefix (+44) is too long, please check and try again");
             return false;
             }
             
          if (temp.match(/^(\0044)$/) && temp.length < 14)
             {
             alert("The number you have entered with this prefix (0044) is too short, please check and try again");
             return false;
             }
          if (temp.match(/^(\0044)$/) && temp.length > 14)
               {
             alert("The number you have entered with this prefix (0044) is too long, please check and try again");
             return false;
             }
             
    document.callmeback_form.telephone.focus();
    document.callmeback_form.telephone.style.background = '#FF8600';
    document.callmeback_form.telephone.style.border = "1px solid #A5ACB2";
    document.callmeback_form.telephone.style.width = "132px";
    document.callmeback_form.telephone.style.height = "15px";
    return false;
    }

Thanks. Dan

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Regex	alexgeek	JavaScript Forum	3	Dec 23rd, 2007 16:52
[SOLVED] Field validation and changing display properties...	c_martini	JavaScript Forum	12	Sep 25th, 2007 11:27
Non-text field Validation	NewDesigner	JavaScript Forum	6	Nov 24th, 2006 22:34
[SOLVED] Convert script to NS6 compatible - Please Help!	Anonymous User	JavaScript Forum	1	Feb 20th, 2005 02:35
Field Validation HELP!	Monie	JavaScript Forum	5	Nov 11th, 2004 19:46

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] playing with Perl Compatible Regex in field validation