• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 837
  • Last Modified:

Restrict user entering wrong characters

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
princehyderabad
Asked:
princehyderabad
2 Solutions
 
basicinstinctCommented:
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
 
basicinstinctCommented:
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
 
basicinstinctCommented:
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
basicinstinctCommented:
Change this line:

numcheck = /[\d]|\#/

to this

numcheck = /\d/

if you only want to allow numeric characters (and not the # character)
0
 
basicinstinctCommented:
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
 
vincent_figoCommented:
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
 
Pravin AsarPrincipal Systems EngineerCommented:
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
 
princehyderabadAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now