Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,160,518 members, 7,843,577 topics. Date: Wednesday, 29 May 2024 at 08:15 AM

Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input (3797 Views)

Urgently Need Some To Validate My Form / How To Validate HTML5 Forms On All Browsers / How To Validate Your Html Or Xhtml Pages / Websites (2) (3) (4)

(1) (2) (3) (Reply) (Go Down)

Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 8:56am On Sep 29, 2013
Good morning everyone,i've been tryin 2 run a jscript snippet to prompt a user to enter a cell phone number using some special characters ,but its not running on my browser...the layout of the number should look this....
###-###-####-###..
Pls feel free to debug it,ill appreeciate it.
Below is the code i used:


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
var x,y,z;
x=document.getElementById("val"wink.value;

y=/(?:\d{3}|\(\d{3}\))\([-\/\.])\d{3}\1\d{4}\1d{3}/;

z=y.exec(x);

if(z=null)
{document.getElementById("para"wink.innerHTML="wrong phone number input"}

else

{document.getElementById("para"wink.innerHTML="Thank you ,your phone number is valid"}
}
</script>
</head>
<body>
<p id="para">please Enter your phone number and press the button to test its validity:</p>

<form action="#">
<input type="text" id="val" value=" ">

<input type="button" id="but" onclick="myFunction()" value="check">
</form>
</body>
</html>
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 8:58am On Sep 29, 2013
Pls replace d smilies with ": )"
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by dhtml(m): 9:40am On Sep 29, 2013
Please use pastebin.com for your code. I need to see the html layout of the form.
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 9:45am On Sep 29, 2013
Wrap ur snippet in [code] tags
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 9:56am On Sep 29, 2013
^^i just did dat...its haz d html5 doctype..
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 9:59am On Sep 29, 2013
dhtml: Please use pastebin.com for your code. I need to see the html layout of the form.

dats d form layout,b4 d </body>....its a test form,referenced 2 no database dou...
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by yawatide(f): 1:09pm On Sep 29, 2013
I use livevalidation for my front end validation. Sure, it may not apply to your format of numbers but nothing stops you from modifying it.
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by dhtml(m): 2:46pm On Sep 29, 2013
^^^Maybe you should try that. I can write you a validated code from the scratch, but it is pointless because them get plentiful online.
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 5:37pm On Sep 29, 2013
dhtml: ^^^Maybe you should try that. I can write you a validated code from the scratch, but it is pointless because them get plentiful online.

@noyawa thanks 4d info,i appreciate it....bt i wudnt mind if u kud still hlp me out wif my codes manually witout any liveval...

@dhtml yex BOSS,bt i wudnt mind if u kud help me out wit d liveval codes,coz i just chked it out n i mst say i waz impressed...i actaully tested it on my phone by verifying an email address and i did got an impressive output...bt d prob is how du i add d various liveval codes 2my form page...ill be xpecting ur reply anytym soon bro....thanks in anticipation
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 6:03pm On Sep 29, 2013
Too many tinz to len in programming,d mor i rid d mor i notice i avnt even strted...no internet connection on my system 2 try out som downloads...d codes i lent my self are beginning 2 fail me..wc kind tin bdiz naw.....i avnt even reached d midpoint of my programming career man don alredy tire....dhtml,yawa,webdezzi,pc guru,code-eater n evwibody i beg help ur broda ooo,make programming no fustrate am o....du well 2 drop as mch links as u cn provide,ill br obliged 2 visit dem as regards javascript tutorials.....i wan 2 be very vast in it,2d extent of creating games and various mobile apps wit it 2geda wif html5 4rm now till d ending of 2014 by His grace alone....,b4 porting 2 php and Sql....thanks ya'll....
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by yawatide(f): 6:53pm On Sep 29, 2013
OP:

I no go lie. I could help write from scratch, but why? There's too much free code out there to help. Plus, girlz no dey like suffer anyhow. Just google for and implement one of the many jQuery solutions and you will be good to go. To put it in perspective, d time wey u dey use ask me and dey reply, you for don implement liveValidation wink
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 7:02pm On Sep 29, 2013
wat if i start a backend tutorial.i.e,full php tutorial to run concurently with the the other web designing thread,since he's handling html ncss.make i disgrace php and mysql ish....


by the way,wisemania,which side u get problem?
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 7:33pm On Sep 29, 2013
yawa-ti-de:
OP:

I no go lie. I could help write from scratch, but why? There's too much free code out there to help. Plus, girlz no dey like suffer anyhow. Just google for and implement one of the many jQuery solutions and you will be good to go. To put it in perspective, d time wey u dey use ask me and dey reply, you for don implement liveValidation wink
hmmmmm....

I don get enof liveval codes alredy ,i don even put am 4my JS tag bt all 2 no effect.i no even understand d codes sef,bt i go still rizin am sha..juz tell me how 2go bout it,and besides i neva enta jQuery 4now....my grand-dad blew u a sweet KISS :*
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 7:39pm On Sep 29, 2013
CODE-EATER:
wat if i start a backend tutorial.i.e,full php tutorial to run concurently with the the other web designing thread,since he's handling html ncss.make i disgrace php and mysql ish....


by the way,wisemania,which side u get problem?

na form validation o.my email,phone number validation no juz get my joy atall ...wen it comes 2 regular expressions it becomes a pain in d a*s.....na dia d gbege dey joor....wen eva i submit my form he no dey eva submit,mst i kw hw 2 manipulate database b4 i submit form ni,i even get XAMPP bt i no sabi use am...man juz tire jare....
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 8:43pm On Sep 29, 2013
So where u need my help?

Form val or regex
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 9:26pm On Sep 29, 2013
CODE-EATER:
So where u need my help?

Form val or regex
form val using js regexp 2 validate am....*i don carry biro, buy new note ,oya no dull ur guy...spit d codes wey u dey chop..*wit explanations ibeg
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 11:02pm On Sep 29, 2013
wisemania:
form val using js regexp 2 validate am....*i don carry biro, buy new note ,oya no dull ur guy...spit d codes wey u dey chop..*wit explanations ibeg
loading...
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by dhtml(m): 11:15pm On Sep 29, 2013
I am now getting annoyed and frustrated, okay, let me code something simple - without using any libraries online,
kai, i got like 20 open windows minus tabs, okay, let me give it a trial - hope i succeed
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 11:35pm On Sep 29, 2013
Frst off all,dat ur regex de unnecessarily complex to me....I just use my phone regex tool now,this one is a bit more straight foreward:


([\d]{3}-[\d]{3}-[\d]{4}-[\d]{3})?


So change ur 4ma expression to this,I have run and tested it,it is suitable for ur number format...try to run the code again with this regex n tell me if it works... let me know wat to do from there
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 11:55pm On Sep 29, 2013
<!DOCTYPE html>
<html>
<body>
<script>
var regex=new RegExp("([\d]{3}-[\d]{3}-[\d]{4}-[\d]{3})?"wink;
document.write(regex.test("222-222-2222-222"wink);
</script>
</body>
</html>


using the above as a basis of lesson:

forget my previous code,i spoted an error,but i'v been able to come up with a simple working example+explanation...read on

NOTE:the above code is not the final version
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by dhtml(m): 12:08am On Sep 30, 2013
I tried to do this with as few lines as possible, and as simple as possible:

http://pastebin.com/XjPQdrWW

I am quite sleepy too, so it is possible i have overlooked something.

Oh, i forgot to add the explanations - typical of me to write codes without explanation.
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by dhtml(m): 12:22am On Sep 30, 2013
Okay, time to explain,

first i am trying to create a scenario whereby you type in your phone number with just numbers, the script automatically adds the dash to it.

So we start with the html markup:
<input type="text" id="phone" onkeypress="return isPhone(this,event)" oncontextmenu="return false"/>
onkeypress will signal the script when you press a key on the keyboard.
isPhone - is a function which tests if what you type on the keyboard is a number. A simple way of testing that is to check for the keyboard scan codes. 0 will give you 48 and 9 will give you 57.

evt.which : evt.keyCode - will tell us the key that was pressed on the keyboard.

charCode > 31 && (charCode < 48 || charCode > 57) = means that if the key pressed is not enter, backspace, delete and it is not a number
followed immediately by return false; = which means just cancel the key that was pressed so it does not show

if(el.value.length==3||el.value.length==7||el.value.length==13) {el.value=el.value+"-";} - this is the code to add the dashes as you type your number.

oncontextmenu="return false" - this will prevent right click from showing. Notice that i did not disable ctrl+v from pasting - this can be done if requested.

Now, this code is somewhat unobtrusive which means you can use it for more than one textbox on the same page.

This means that you can line up the following on the same page:
<input type="text" id="phone" onkeypress="return isPhone(this,event)" oncontextmenu="return false"/>
<input type="text" id="phone1" onkeypress="return isPhone(this,event)" oncontextmenu="return false"/>
<input type="text" id="phone2" onkeypress="return isPhone(this,event)" oncontextmenu="return false"/>

and there wont be clashes

@op, you may want to add a maxlength to limit the total number of characters that can be typed. Notice that 3 dashes are added.
So if you are looking at a standard gsm number e.g. 07030234535 which will be written as 14 characters
<input type="text" id="phone" onkeypress="return isPhone(this,event)" maxlength="14" oncontextmenu="return false"/>


Now, this code is crossplatform and works well on all browsers (at least i expect it to).

Sleeps off on the thread. . .
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by dhtml(m): 12:26am On Sep 30, 2013
Let me try to explain this code a bit more. This is a shorthand code that means
evt = (evt) ? evt : window.event;

if (evt) {evt=evt;} else {evt=window.event;}
it also meants
if (evt=true) {evt=evt;} else {evt=window.event;}

The way events work on microsoft internet explorer and other browsers is slightly different. This code bridges that gap.

But if you are using jQuery and all them them library, you do not need to bother yourself with crossplatform issues.
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 12:37am On Sep 30, 2013
since dhml has accomplished it,no need na...abi shuld i continue d explanation?
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by dhtml(m): 1:38am On Sep 30, 2013
Are you sure i have accomplished it? You may want to do your own version, oya, make we hear your explanation. Me no sabi explain at all at all. . . .even me sef no understand my own explaining and explanations. . .
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by Nobody: 1:53am On Sep 30, 2013
wisemania: Good morning everyone,i've been tryin 2 run a jscript snippet to prompt a user to enter a cell phone number using some special characters ,but its not running on my browser...the layout of the number should look this....
###-###-####-###..
Pls feel free to debug it,ill appreeciate it.
Below is the code i used:


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
var x,y,z;
x=document.getElementById("val"wink.value;

y=/(?:\d{3}|\(\d{3}\))\([-\/\.])\d{3}\1\d{4}\1d{3}/; //the RegExp code doesn't work use this i found online
y=/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;

z=y.exec(x);

if(z=null) //If Z =null is assignment and not comparing, because z is assigned this evaluates to true
{document.getElementById("para"wink.innerHTML="wrong phone number input"}

else

{document.getElementById("para"wink.innerHTML="Thank you ,your phone number is valid"}
}
</script>
</head>
<body>
<p id="para">please Enter your phone number and press the button to test its validity:</p>

<form action="#">
<input type="text" id="val" value=" ">

<input type="button" id="but" onclick="myFunction()" value="check">
</form>
</body>
</html>
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 6:42am On Sep 30, 2013
dhtml: Are you sure i have accomplished it? You may want to do your own version, oya, make we hear your explanation. Me no sabi explain at all at all. . . .even me sef no understand my own explaining and explanations. . .
lol...lie lie boy...u?...any way no probs..although my approach is a Wii bit simpler and easy to comprehend..

"Keep it simple,stupid"
-tim O'Reilly.

LOADING...
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by dhtml(m): 6:50am On Sep 30, 2013
CODE-EATER:
lol...lie lie boy...u?...any way no probs..although my approach is a Wii bit simpler and easy to comprehend..

"Keep it simple,stupid"
-tim O'Reilly.

LOADING...
I am still expecting the final version of your code. Lets compare so the op uses the one he feels more comfortable with.
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 7:09am On Sep 30, 2013
Thanks evw1 its tym 2 grab a strong brew of coffee ,sip it get relaxed 2 get my hands dirty wif diz codes,code-eater i kw ure viewing dis,oya lets see ur own xplanation...thanks
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by CODEEATER(m): 7:21am On Sep 30, 2013
I'll be back by 12 with a full tut and working code + page...

My physics teacher is here, early mornings are the best time of a day to study stuff like that...
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 9:32am On Sep 30, 2013
CODE-EATER:
I'll be back by 12 with a full tut and working code + page...

My physics teacher is here, early mornings are the best time of a day to study stuff like that...
k ......bt doz smileis in ur correction is killin me coz i av copied ur codes bt its not running,i changed d smilies to "; )" yet d code no run sha...help me

pc-guru
i tried urs as well bt no effect,may b u shud restructure d codes 4me 2 copy and paste on my notepad...thanks in anticipation
Re: Hlp With Javascript Snippet To Validate A User's Cell Phone Number Input by wisemania(m): 10:29am On Sep 30, 2013
dhtml: I tried to do this with as few lines as possible, and as simple as possible:

http://pastebin.com/XjPQdrWW

I am quite sleepy too, so it is possible i have overlooked something.

Oh, i forgot to add the explanations - typical of me to write codes without explanation.

boss thanks 4d link,i don copy am outly in2 my peety project note,make i rid ur xplanation now 2get a proper understandin...d codes loooks very clean,bt me neva c d new attribute(oncontextmenu,) wey u use b4 sha,mayb na html5 he dey,nahin b say i gaz go buy new note again 2 strt html5 and css3 proper coz i rush html5,witout even touching css3 sha...*bak 2d drawing board,opens a new note,logs in2 w3schools and mozilla.com 2 strt,no tym 2dull* ...@ code-eater i still dey expect u sha....wr webdezzy and slyxy dey,dem no dey diz earth again ni..nawaooo

(1) (2) (3) (Reply)

Extend 1 Desktop To 30 Users Simontaneously Thru Virtual Pc! / Help! How To Pull Data From Database And Display On A Webpage / Whogohost Server Down! This Has Taken Too Long To Fix

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 59
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.