Solved

restrict the user to eneter numbers,alpahbets and @ in a input box...

Posted on 2001-08-09
10
216 Views
Last Modified: 2007-12-19
Hi,
How can i restrict the user to eneter numbers,alpahbets and @ in a input box.

George
0
Comment
Question by:knightrgv
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 3

Accepted Solution

by:
CyberSoft earned 50 total points
ID: 6368205
Hi knightrgv

This should give you a good idea how to do it using Regular Expressions.

<!-- ----- code example starts here ----- -->
<html>
<head>
     <title>Email validation example</title>
     <script language="JavaScript">
          var emailexp = /^[a-z][a-z_0-9\.]+@[a-z_0-9\.]+\.[a-z]/i
         
          function isValid(pattern, str)
          {
               return pattern.test(str)
          }
         
          function validateEmail(emailField)
          {
               if (!isValid(emailexp, emailField.value))
               {
                    alert("Invalid email")
                    emailField.focus()
                    return false
               }
               
               return true
          }
     </script>
</head>

<body>

Email address must be of the form something@somewhere.somewhereelse
<BR>
(ie as long as it has something before the @ symbol as well as something after
<BR>
the @ symbol a period and something after the priod, each of any length)
<BR><BR>
<form id="frm" name="frm" method="post" action="nextPage.html" onsubmit="return validateEmail(document.forms['frm'].txtEmail)">
     Email: <input type="text" name="txtEmail" id="txtEmail">
     <input type="submit" value="Submit" name-"submit">
</form>

</body>
</html>

<!-- ----- code example ends here ----- -->


Regards,
CyberSoft
0
 

Author Comment

by:knightrgv
ID: 6368349
Hi,
I am sorry. But i am not able to interpret this
var emailexp = /^[a-z][a-z_0-9\.]+@[a-z_0-9\.]+\.[a-z]/i

I only want the user to restricy the user from entering anything other than
1.numbers
2.alphabets
3.@

Can you help some more?

Thanks again,
Knightrgv
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6368379
function checkVal(obj)
{
    var validCharacters="abcdefghijklmnopqrstuvwxyz";
    var curVal = obj.value;
    var tmpVal = ""
    var bValid = true;
    for(i=0;i<curVal.length;i++)
     if(validCharacters.indexOf(curVal.charAt(i))<0)
       tmpVal += curVal.charAt(i);
     else bValid=false
    if(bValid==false)
    {
       alert("illegal characters encountered");
       obj.value=tmpVal;
    }    
}

and call it like
<input type=text onKeyUp="checkVal(this)">

Regards,
CJ
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 22

Expert Comment

by:CJ_S
ID: 6368383
oh, and add any valid characters to the validCharacters variable.
0
 
LVL 3

Expert Comment

by:CyberSoft
ID: 6368388
That is exactly what that bit of code will do. It's called regular expressions. What that line means is that will allow characters (a to z) and numbers (0 to 9) as well as one @ symbol and at least one period (.)

Regards,
CyberSoft
0
 

Author Comment

by:knightrgv
ID: 6369377
Hi,
Thank you for the code. But one more problem.

How come i am able to enter only one character in my input box? What should i change to enter more than one.

Knightrgv
0
 
LVL 1

Expert Comment

by:labcoat
ID: 6369620
knightrgv,

the original comment by CyberSoft gave you WILL work.

He is right, it is a regular expression which is the most efficient way to do any sort of [string] validation/manipulation.

You can also enter more than one character in his example.

Cut-n-paste it and test it - see for your self.

You should give him credit for that comment.

--labcoat
0
 
LVL 3

Expert Comment

by:CyberSoft
ID: 6369664
Thanks labcoat - an added advantage is it's also cross-browser compatible.

Regards,
CyberSoft
0
 

Author Comment

by:knightrgv
ID: 6372377
The code worked great. Thank you.
0
 
LVL 3

Expert Comment

by:CyberSoft
ID: 6372401
Always a pleasure to help out. After all thats why we're here.

Regards,
CyberSoft
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

627 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