Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    Question checking input for invalid characters?

    hello all!

    question,
    how can i make sure that characters such as \ / : * ? " < > |
    do not get entered into my input="test" feild?

    any example would be great, I'm still very new to javascript..
    thanks in advance for your time!

  • #2
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    sorry, i ment my input="text" feild of course..

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    The simplest way to do this is to use a regular expression:-


    EXAMPLE:-

    <tr>
    <td><font face="Arial"><em><b>Enter some text here</b></em></font></td>
    <td><input type="text" size="25" maxlength="25" name="testext" onblur="if(/\W/g.test(this.value)){alert('You have entered an invalid character. Please try again.'); this.value=""; this.focus)}"> </font></td></tr>

    \W means "any single non-word character", which is equivalent to anything except a-z A-z 0-9 and _

    So if anything except a-z A-Z 0-9 and _ are found in the string, then the alert is triggered, the value reset to "" and the focus returned to that text box ready for a re-try.

    Hope this helps.

    But please do not say "thanks in advance". It may be cool but it is not polite.
    Last edited by Philip M; 04-30-2004 at 07:34 PM.

  • #4
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    hmm, i tested that code,, but it doesn't seem to work for me,
    not sure what i'm doing wrong here,,
    and like i said,, i'm still very new with this.

    should this make it so that can't type those characters at all, or does it prompt them to say no?


    thanks again for your time!
    ken

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Sorry Ken, there was a typo.

    Try it again:-

    <tr>
    <td><font face="Arial"><em><b>Enter some text here</b></em></font></td>
    <td><input type="text" size="25" maxlength="25" name="testext" onblur="if(/\W/g.test(this.value)){alert('You have entered an invalid character. Please try again.'); this.value=''; this.focus()}"> </font></td></tr>

    As soon as the focus is removed (onblur) the text string is tested, and if an invalid character is present then an alert comes up with the message. Note that this does not cover where nothing at all is entered into the textbox. If you want that field to be required then further code is necessary.

    It would be possible to check for an invalid charcater at every key stroke (see Sadiq infra) but I do not see much point in this. Presumably your users are advised as to what is acceptable in the textbox.
    Last edited by Philip M; 04-30-2004 at 08:16 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Something like this maybe:
    Code:
    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    <form action="" method="POST" id="myForm" >
    <input type="text" name="myText" onKeyPress="return checkKey(event)">
    
    <script type="text/javascript" language="JavaScript">
    function checkKey(textBox, evt) {
     var key;
     if(window.event) {
      key = window.event.keyCode;
     }
     else if(evt) {
      key = evt.which;
     }
     else {
      return; //weird browser
     }
     
     switch(key) {
      case 92:
      case 47:
      case 58:
      case 42:
      case 63:
      case 34:
      case 60:
      case 62:
      case 124:
       return false;
      default:
       return true;
     }
    } 
    </script>
    </form>
    </body>
    </html>
    Let me know how that works out for you.

    Sadiq.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    With respect, Sadiq, that seems an absurdly long way round to get the result which a regular expression deals with in afew characters. And your code only traps the characters listed, not every non-word character.

    Other contributors have urged coders to learn regular expressions - they certainly have changed my coding abilities for the better!

  • #8
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I actually started typing that post thinking mine would be the first reply!

    I know it's a long way around, but I didn't realize that angst was concerned only with non-word characters. I took his list literally thinking there was some weird reason that he didn't want those characters to show..

    Personally, I rarely think to use regex. It's usually the third solution that comes to mind! I really should try to think in terms of regular expressions more often as it does shorten the code and run more quickly.

    Anyway.. angst, learn your regular expressions or else Dr. Phil's gonna be on your case !

    Sadiq.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Here is another way of doing it, with the advantage of being able to specify more closely which characters are invalid:-

    <tr>
    <td><font face="Arial"><em><b>Enter some text here</b></em></font></td>
    <td><input type="text" size="25" maxlength="25" name="testsometext" onblur="checktext(this)"> </font></td></tr>

    <SCRIPT = JavaScript>
    function checktext(which) {
    var badchars = '/\@:?%!&£$#~<>^*+=";(){}[]'; // invalid characters in text box
    var name = which.value;
    for (var x=0; x < name.length; x++) {
    if (badchars.indexOf(name.charAt(x))!=-1) {
    alert ("You have entered invalid characters into this box. Please try again");
    which.value=""; // clear the textbox - if required
    which.focus(); // set the focus back to the textbox
    return false;
    }
    }
    }
    </SCRIPT>

    So you can permit punctuation characters such as . or , or whatever

    If the text entered is lengthy you may wish to not clear the textbox, but simply require the user to try again by editing his input.
    Last edited by Philip M; 04-30-2004 at 08:43 PM.

  • #10
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    hey,
    your guys are great!
    thanks alot for all your help!

    just wondering one thing about this script:

    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    <form action="" method="POST" id="myForm" >
    <input type="text" name="myText" onKeyPress="return checkKey(event)">

    <script type="text/javascript" language="JavaScript">
    function checkKey(textBox, evt) {
    var key;
    if(window.event) {
    key = window.event.keyCode;
    }
    else if(evt) {
    key = evt.which;
    }
    else {
    return; //weird browser
    }

    switch(key) {
    case 92:
    case 47:
    case 58:
    case 42:
    case 63:
    case 34:
    case 60:
    case 62:
    case 124:
    return false;
    default:
    return true;
    }
    }
    </script>
    </form>
    </body>
    </html>


    i'm not using that one right now,
    but what those this mean: case 62: ?
    that those character codes or something? and if so were can i learn more about them?


    again, thanks every one!
    ken

  • #11
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes you are right, they are character codes. You can get a complete listing here:
    http://www.web-source.net/symbols.htm


    Sadiq.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •