?
Solved

Restrict user entering wrong characters

Posted on 2006-05-08
8
Medium Priority
?
809 Views
Last Modified: 2013-12-03
hi

In a form how can I restrict user display only numbers. Apart from # any other character type in that filed should show pop-up alert.

Also in JS is there a way to fancy phone# while entering. Like user should enter first 3 # and it automatically (123) happens and then user enter 3 # and 4 # and automatically (123)222-3333 this happens. Or any other fancy way.

thx,
PH
0
Comment
Question by:princehyderabad
8 Comments
 
LVL 23

Expert Comment

by:basicinstinct
ID: 16635752
Hi - this solves your first problem:

<html>
<body>
<script type="text/javascript">
function noChars(e)
{
      var keynum
      var keychar
      var numcheck
      
      if(window.event) // IE
      {
      keynum = e.keyCode
      }
      else if(e.which) // Netscape/Firefox/Opera
      {
      keynum = e.which
      }
      keychar = String.fromCharCode(keynum)
      numcheck = /[\d]|\#/
      return numcheck.test(keychar)
}

</script>

<form>
<input type="text" onkeypress="return noNumbers(event)" />
</form>

</html>

This solution is heavily based on the example here:
http://www.w3schools.com/jsref/jsref_onkeypress.asp

0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 16635761
Sorry - there's a typo in my code above.  Here it is:

<html>
<body>
<script type="text/javascript">
function noChars(e)
{
     var keynum
     var keychar
     var numcheck
     
     if(window.event) // IE
     {
     keynum = e.keyCode
     }
     else if(e.which) // Netscape/Firefox/Opera
     {
     keynum = e.which
     }
     keychar = String.fromCharCode(keynum)
     numcheck = /[\d]|\#/
     return numcheck.test(keychar)
}

</script>

<form>
<input type="text" onkeypress="return noChars(event)" />
</form>

</html>
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 16635815
This is the function with an alert to warn the user, as you requested:

function noChars(e)
{
     var keynum
     var keychar
     var numcheck
     
     if(window.event) // IE
     {
     keynum = e.keyCode
     }
     else if(e.which) // Netscape/Firefox/Opera
     {
     keynum = e.which
     }
     keychar = String.fromCharCode(keynum)
     numcheck = /[\d]|\#/
     if(!numcheck.test(keychar))
     {
           alert("Please enter only numeric characters and #");
     }
     return numcheck.test(keychar)
}
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 23

Expert Comment

by:basicinstinct
ID: 16635823
Change this line:

numcheck = /[\d]|\#/

to this

numcheck = /\d/

if you only want to allow numeric characters (and not the # character)
0
 
LVL 23

Accepted Solution

by:
basicinstinct earned 400 total points
ID: 16636129
By the way, there is no "fancy way" of formatting the phone number as the user types.  It can be done, but you just have to code a solution that works for you.

Here is one possible solution - the only drawback with it is that the user can backspace through the number and delete the formatting characters - they will not be able to put them back in because they can only enter numeic values.

Here's the whole thing together:

<html>
<body>
<script type="text/javascript">
function noChars(e)
{
     var keynum
     var keychar
     var numcheck
     
     if(window.event) // IE
     {
     keynum = e.keyCode
     }
     else if(e.which) // Netscape/Firefox/Opera
     {
     keynum = e.which
     }
     keychar = String.fromCharCode(keynum)
     numcheck = /\d/
     if(!numcheck.test(keychar))
     {
           alert("Please enter only numeric characters and #");
     }
     formatTel();
     return numcheck.test(keychar)
}

function formatTel()
{
      var telNo = document.raymond.bob.value;
      var len = telNo.length;
      if(len == 13)
      {
            
      }
      document.raymond.bob.value = telNo;
}

function formatTel()
{
      var telNo = document.raymond.bob.value;
      var len = telNo.length;
      if(len == 3 || len == 4)
      {
            telNo = telNo.replace('(', '');
            telNo = telNo.replace(')', '');
            telNo = telNo.replace('-', '');
            len = telNo.length;
            if(len == 3)
            {
                  telNo = "(" + telNo;
                  telNo += ")";
            }
      }
      else if(len == 8)
      {
            telNo = telNo.replace('-', '');
            len = telNo.length;
            if(len == 8)
            {
                  telNo += "-";
            }
      }
      document.raymond.bob.value = telNo;
}


</script>

<form name="raymond">
<input type="text" maxlength="13" name="bob" onkeypress="return noChars(event)" />
</form>

</html>



0
 
LVL 3

Expert Comment

by:vincent_figo
ID: 16637861
I use this function:

onkeypress="if ((event.keyCode < 97) || (event.keyCode > 122)) event.returnValue = false;"

the keycode numbers are the ascii values of the allowed characters. In my example only lowercase alpha characters are allowed. for alle the ascii values look here:

http://www.lookuptables.com/
0
 
LVL 29

Assisted Solution

by:Pravin Asar
Pravin Asar earned 200 total points
ID: 16639346
Here is my version of phone number format.

<script language="javascript">
<!-- Begin
var n;
var p;
var p1;
function ValidatePhone(){
p=p1.value
if(p.length==3){
      //d10=p.indexOf('(')
      pp=p;
      d4=p.indexOf('(')
      d5=p.indexOf(')')
      if(d4==-1){
            pp="("+pp;
      }
      if(d5==-1){
            pp=pp+")";
      }
      //pp="("+pp+")";
      document.frmPhone.txtphone.value="";
      document.frmPhone.txtphone.value=pp;
}
if(p.length>3){
      d1=p.indexOf('(')
      d2=p.indexOf(')')
      if (d2==-1){
            l30=p.length;
            p30=p.substring(0,4);
            //alert(p30);
            p30=p30+")"
            p31=p.substring(4,l30);
            pp=p30+p31;
            //alert(p31);
            document.frmPhone.txtphone.value="";
            document.frmPhone.txtphone.value=pp;
      }
      }
if(p.length>5){
      p11=p.substring(d1+1,d2);
      if(p11.length>3){
      p12=p11;
      l12=p12.length;
      l15=p.length
      //l12=l12-3
      p13=p11.substring(0,3);
      p14=p11.substring(3,l12);
      p15=p.substring(d2+1,l15);
      document.frmPhone.txtphone.value="";
      pp="("+p13+")"+p14+p15;
      document.frmPhone.txtphone.value=pp;
      //obj1.value="";
      //obj1.value=pp;
      }
      l16=p.length;
      p16=p.substring(d2+1,l16);
      l17=p16.length;
      if(l17>3&&p16.indexOf('-')==-1){
            p17=p.substring(d2+1,d2+4);
            p18=p.substring(d2+4,l16);
            p19=p.substring(0,d2+1);
            //alert(p19);
      pp=p19+p17+"-"+p18;
      document.frmPhone.txtphone.value="";
      document.frmPhone.txtphone.value=pp;
      //obj1.value="";
      //obj1.value=pp;
      }
}
//}
setTimeout(ValidatePhone,100)
}
function getIt(m){
n=m.name;
//p1=document.forms[0].elements[n]
p1=m
ValidatePhone()
}
function testphone(obj1){
p=obj1.value
//alert(p)
p=p.replace("(","")
p=p.replace(")","")
p=p.replace("-","")
p=p.replace("-","")
//alert(isNaN(p))
if (isNaN(p)==true){
alert("Check phone");
return false;
}
}
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<div align="center">
<form name=frmPhone>
<font size="4" color="#0000FF"><b>Enter Telephone Number</b></font><br>
(To refresh, hold down shift and press the browser refresh button)<br>
<input type=text name=txtphone maxlength="13" onclick="javascript:getIt(this)" >
</form>
</div>
</BODY>
0
 

Author Comment

by:princehyderabad
ID: 16643826
Thanks for responses.

I like both basicinstinct & pravinasar's JS. But basicinstinct also has validation allowing only numbers to enter I like it.

If I like to go with basicinstinct's JS how can I use this JS for multi purpose:

eg:- I wanna call JS for following fields( Phone, Cell_Phone, Fax) I think a minor change will make it work for all 3 fields. But I screwed up when i tried. Any help.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question