14 Replies - 894 Views - Last Post: 19 October 2014 - 04:22 PM

#1 nanujoaha   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 96
  • Joined: 30-August 14

validate with Regex for phone numbers

Posted 19 October 2014 - 12:00 PM

I am trying to validate my form for phone number textboxes.
In my html, I have
<tr>
      <td><div class="alignRight">Phone 111 555 1111</div></td>
      <td><input name="PhoneA" id="first" onkeyup="movetoNext(this, 'second')" type="text" maxlength="3" size="3" value="" tabindex="2" /> 
          <input name="PhoneB" id="second" onkeyup="movetoNext(this, 'third')" type="text" maxlength="3" size="3" value="" tabindex="3"  /> 
          <input name="PhoneC" id="third"  type="text"  maxlength="4" size="4" value="" tabindex="4" /></td>
      <td><label id="E_Phone" class="hideerror">* Required format 111 222 3333</label></td>
   </tr>



And in my js, I have

var patternPhoneA = new RegExp("^\d{3,3}$");
	var patternPhoneB = new RegExp("^\d{3,3}$");
	var patternPhoneC = new RegExp("^\d{4,4}$");

	if (document.forms[0].PhoneC.value == ""
	||!patternPhoneC.test(document.forms[0].PhoneC.value)){
	document.getElementById('E_Phone').style.display="inline";
	document.forms[0].PhoneC.focus();
	document.forms[0].PhoneC.style.backgroundColor="lemonchiffon"
	}
	else{
	document.getElementById('E_Phone').style.display="none";
	document.forms[0].PhoneC.style.backgroundColor="white"
	}
	
	if (document.forms[0].PhoneB.value == ""
	||!patternPhoneB.test(document.forms[0].PhoneB.value)){
	document.forms[0].PhoneB.focus();
	document.getElementById('E_Phone').style.display="inline";
	document.forms[0].PhoneB.style.backgroundColor="lemonchiffon"
	}
	else{
	document.getElementById('E_Phone').style.display="none";
	document.forms[0].PhoneB.style.backgroundColor="white"
	}

	if (document.forms[0].PhoneA.value == ""
	||!patternPhoneA.test(document.forms[0].PhoneA.value)){
	document.forms[0].PhoneA.focus();
	document.forms[0].PhoneA.style.backgroundColor="lemonchiffon"
	blnError = true;
	}
	else{
	document.getElementById('E_Phone').style.display="none";
	document.forms[0].PhoneA.style.backgroundColor="white"
	}



I don't know if my Regex expression is wrong or my if statement is wrong. Even though I put corrent number of digits on each textboxes, it still shows me an error message and focus on first textbox which is for area code input.What is wrong with my code?

Is This A Good Question/Topic? 0
  • +

Replies To: validate with Regex for phone numbers

#2 andrewsw   User is offline

  • a lovely bit of linq
  • member icon

Reputation: 6897
  • View blog
  • Posts: 28,515
  • Joined: 12-December 12

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:11 PM

^\d{3,3}$ means 3 to 3 digits, i.e. a single digit. \d{3} is for three digits.
Was This Post Helpful? 0
  • +
  • -

#3 nanujoaha   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 96
  • Joined: 30-August 14

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:16 PM

then I changed the expression to

var patternPhoneA = new RegExp("^\d{3}$");
var patternPhoneB = new RegExp("^\d{3}$");
var patternPhoneC = new RegExp("^\d{4}$");



and in the textboxes, I put 111 111 1111. But still error message shows up
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • a lovely bit of linq
  • member icon

Reputation: 6897
  • View blog
  • Posts: 28,515
  • Joined: 12-December 12

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:18 PM

As you are putting the three sequences in different inputs then regex could be considered overkill. You might just confirm that each of the inputs are integer numbers, of 3 and 4 digits.

Alternatively, you could use one input, with the digits separated by one or more whitespace character.

Attached Image

This post has been edited by andrewsw: 19 October 2014 - 02:41 PM

Was This Post Helpful? 0
  • +
  • -

#5 nanujoaha   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 96
  • Joined: 30-August 14

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:21 PM

I see... but my assignment specifically ask us to make three different input with regex expression. hah...I guess there is no way to do it...

This post has been edited by nanujoaha: 19 October 2014 - 02:22 PM

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • a lovely bit of linq
  • member icon

Reputation: 6897
  • View blog
  • Posts: 28,515
  • Joined: 12-December 12

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:26 PM

Quote

I guess there is no way to do it...

Of course there is. You just need to work through and debug your code to find out where it goes wrong.

There are links for the various browser's consoles in my signature below. If you use your browser's console you can set a breakpoint and step through your code. Alternatively, you can at least use console.log() statements to help trace through your code.

This post has been edited by andrewsw: 19 October 2014 - 02:27 PM

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • a lovely bit of linq
  • member icon

Reputation: 6897
  • View blog
  • Posts: 28,515
  • Joined: 12-December 12

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:46 PM

Actually, you need to use two back-slashes \\d from Javascript, the first one needs to be escaped. Then it works.

Spoiler

This post has been edited by andrewsw: 19 October 2014 - 02:49 PM

Was This Post Helpful? 1
  • +
  • -

#8 nanujoaha   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 96
  • Joined: 30-August 14

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:48 PM

I could find only one error with console. I had function for moving cursor automatically for phone input boxes. The calling function is inside of head which is this
<head>
	<meta name="author" content="dfs" />
	<meta name="description" content="forms" />
	<meta name="keywords" content="Client Side Programming, Javascript, CSS" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />
	<link rel="stylesheet" href="buyer.css"/>
	<script type="text/javascript" src="shopping.js"></script>
	[color="#FF00FF"]<script type="text/javascript">movetoNext(current, nextFieldID)</script>[/color]
   <title>Forms::Seunghun Jun</title>
   </head>



and in my js,

function movetoNext(current, nextFieldID) 
{	if (current.value.length >= current.maxLength) {
	document.getElementById(nextFieldID).focus();
	}
	}



those code helps moving cursor automatically to the next just for phone number input boxes. And the error says "Uncaught ReferenceError: current is not defined VM55 buyer.html:11(anonymous function)" Is this the problem?

This post has been edited by nanujoaha: 19 October 2014 - 02:50 PM

Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is offline

  • a lovely bit of linq
  • member icon

Reputation: 6897
  • View blog
  • Posts: 28,515
  • Joined: 12-December 12

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:53 PM

That is a problem. This code
movetoNext(current, nextFieldID)

runs straight-away, as soon as that script is reached, and current isn't defined at that stage, nor is nextFieldID.

I ignored movetoNext in my test-code (in my previous post) as I didn't have the code for it.



I suggest that you fix either the regex testing (as in my previous post), or the movetoNext feature, don't try and do both at the same time.

This post has been edited by andrewsw: 19 October 2014 - 02:56 PM

Was This Post Helpful? 1
  • +
  • -

#10 nanujoaha   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 96
  • Joined: 30-August 14

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 02:59 PM

View Postandrewsw, on 19 October 2014 - 02:53 PM, said:

I suggest that you fix either the regex testing (as in my previous post), or the movetoNext feature, don't try and do both at the same time.


So.. I have to give up one of those then?
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw   User is offline

  • a lovely bit of linq
  • member icon

Reputation: 6897
  • View blog
  • Posts: 28,515
  • Joined: 12-December 12

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 03:03 PM

No. Just concentrate on fixing one at a time.

What's with all the negativity?

Quote

"I guess there is no way to do it... ",
"So.. I have to give up one of those then?"

Was This Post Helpful? 0
  • +
  • -

#12 nanujoaha   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 96
  • Joined: 30-August 14

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 03:08 PM

no I though you were saying that I am trying something it is not possible... Never mind I am working on validation now
Was This Post Helpful? 0
  • +
  • -

#13 nanujoaha   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 96
  • Joined: 30-August 14

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 04:18 PM

Here is my final result. I realized I didn't have to call the movetoNext function from the head because I called it inside of <input> as onkeyup="movetoNext. So that solved problem with an error that I had with console. Also, I changed REGEX expressions as you told me to change and also, I changed my if statement for validation as following:
var patternPhoneA = new RegExp("^\\d{3}$");
	var patternPhoneB = new RegExp("^\\d{3}$");
	var patternPhoneC = new RegExp("^\\d{4}$");

	if(patternPhoneC.test(document.forms[0].PhoneC.value)
	&&patternPhoneB.test(document.forms[0].PhoneB.value)
	&&patternPhoneA.test(document.forms[0].PhoneA.value)){
	
	document.getElementById('E_Phone').style.display="none";
	}

	if(patternPhoneC.test(document.forms[0].PhoneC.value)){
	document.forms[0].PhoneC.style.backgroundColor="white"}

	if(patternPhoneB.test(document.forms[0].PhoneB.value)){
	document.forms[0].PhoneB.style.backgroundColor="white"}

	if(patternPhoneA.test(document.forms[0].PhoneA.value)){
	document.forms[0].PhoneA.style.backgroundColor="white"}

	if (!patternPhoneC.test(document.forms[0].PhoneC.value)){
	document.getElementById('E_Phone').style.display="inline";
	document.forms[0].PhoneC.focus();
	document.forms[0].PhoneC.style.backgroundColor="lemonchiffon"
	}
	if (!patternPhoneB.test(document.forms[0].PhoneB.value)){
	document.getElementById('E_Phone').style.display="inline";
	document.forms[0].PhoneB.focus();
	document.forms[0].PhoneB.style.backgroundColor="lemonchiffon"
	}
	if (!patternPhoneA.test(document.forms[0].PhoneA.value)){
	document.getElementById('E_Phone').style.display="inline";
	document.forms[0].PhoneA.focus();
	document.forms[0].PhoneA.style.backgroundColor="lemonchiffon"
	}



Now, it works perfectly fine

This post has been edited by nanujoaha: 19 October 2014 - 04:20 PM

Was This Post Helpful? 1
  • +
  • -

#14 andrewsw   User is offline

  • a lovely bit of linq
  • member icon

Reputation: 6897
  • View blog
  • Posts: 28,515
  • Joined: 12-December 12

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 04:20 PM

Thanks for reporting back with your solution.
Was This Post Helpful? 0
  • +
  • -

#15 nanujoaha   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 96
  • Joined: 30-August 14

Re: validate with Regex for phone numbers

Posted 19 October 2014 - 04:22 PM

No, I thank you so much. I come here a lot recently, and you are the one who helped me every single times. Thank you!

This post has been edited by nanujoaha: 19 October 2014 - 04:22 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1