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 13 of 13
  1. #1
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    202
    Thanks
    37
    Thanked 0 Times in 0 Posts

    Text Validation String Length

    Hi,
    I need some Javascript that issues the user an error if they type a word in excess e.g 20 characters eg if they write:

    "My names is john and I'm from newyorkintheunitedstatesofamerica. Tomorrow is Monday..."

    ...into a textbox an error pops up (Onblur event maybe) that require them to go back and fix the long word. An OK alert box or something. eg Please review the input Click OK.

    I need this to stop users destroying the format of my website.

    THANKS!!!!

  • #2
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    202
    Thanks
    37
    Thanked 0 Times in 0 Posts
    ...it relates to a user inputting text to a textfield. Thx

  • #3
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    This regexp will give you back words with more than letterCount letters:

    Code:
    var string = "My names is john and I'm from newyorkintheunitedstatesofamerica. Tomorrow is Monday and thiswordhasmorethantwentyletters has more than twenty letters.";
    var letterCount = 20;
    var matches;
    if (matches = string.match(new RegExp("\\b[a-z]{"+ letterCount +",}\\b", "ig"))) {
    	alert("The following words have more than " + letterCount + " letters: " + matches.join(", "));
    }

  • #4
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    202
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Thanks Venegal.
    Just wondering can I extend the code to include numbers and punctuation eg if someone enters fdfsdgd4553636;@???>>>>£$^%%%$^&%&^%*&
    Thanks

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Venegal's script will only catch words of more than 20 alpha characters. Suggested improvement:-

    Code:
    <script type = "text/javascript">
    var string = "My names is john and I'm from newyorkinth?euni.ted;stat$esof*america. Tomorrow is Monday and thiswordhasmore12345thantwentycharacters has more than twenty characters.";
    var characterCount = 20;
    var matches;
    if (matches = string.match(new RegExp("\\b[a-z0-9?!\"\'\$\*%:\^\.\-><\\\/+=]{"+ characterCount +",}\\b", "ig"))) {
    alert("The following words have more than " + characterCount + " characters: " + matches.join(", "));
    }
    
    </script>
    Last edited by Philip M; 05-17-2009 at 07:13 PM.

  • Users who have thanked Philip M for this post:

    howie2009 (05-17-2009)

  • #6
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Sure:
    Code:
    var string = "My names is john and I'm from newyorkintheunitedstatesofamerica. Tomorrow is Monday and fdfsdgd4553636;@???>>>>£$^%%%$^&%&^%*& has more than twenty letters.";
    var letterCount = 20;
    var matches;
    if (matches = string.match(new RegExp("[^\\s]{"+ letterCount +",}", "ig"))) {
    	alert("The following words have more than " + letterCount + " letters: " + matches.join(", "));
    }
    But as you can see, allowing punctuation to be a part of a word also implies that "real" punctuation won't be distinguished from words any more. The first hit, for example is now newyorkintheunitedstatesofamerica. instead of just newyorkintheunitedstatesofamerica

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <style type="text/css">
    #ta1 {
    width: 400px;
    height: 200px;
    background: ivory;
    }
    </style>
    <script type="text/javascript">
    
    function chkWords(e)
    {
       e = e || window.event;
       var obj = e.target || e.srcElement;
       var word, words = obj.value.split(/\s+/);
       for (var w = 0; w < words.length; w++)
       {
          word = words[w];
          if (word.length > 20)
          {
             alert('Please: no words longer than 20 characters!');
             obj.value = obj.value.replace(new RegExp(word), word.substring(0, 20));
          }
       }
    }
    
    function addListener(obj, evt, handler)
    {
       if (obj.addEventListener)
       {
          obj.addEventListener(evt, handler, false);
       }
       else if (obj.attachEvent)
       {
          obj.attachEvent('on' + evt, handler);
       }
    }
    
    function init()
    {
       addListener(document.getElementById('ta1'), 'keyup', chkWords);
    }
    
    addListener(window, 'load', init);
    
    </script>
    </head>
    <body>
    <textarea id="ta1"></textarea>
    </body>
    </html>

  • Users who have thanked adios for this post:

    howie2009 (05-17-2009)

  • #8
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    202
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Hi Guys,
    Thanks for that.
    I have it working for a-z 0-9 and A-Z but the punctuation is not caught.
    e.g $^%$%^$%^$%$%^$^$%^$%^$%^$^%$^$%^$%^ is not returned as an error as per: a-z0-9?!\"\'\$\*%:\^\.\-><\\\/+=? in philips solution

    THANKS!

  • #9
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Did you try the solution in my second post? It catches everything except for whitespace, which is used to seperate words.

  • Users who have thanked venegal for this post:

    howie2009 (05-17-2009)

  • #10
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    202
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Thanks Venegal - That's perfect! Exactly what I needed!

    Is there a way to ensure the user can't go on unless they fix the long word i.e some kind of loop?

    THANKS A MILLION

  • #11
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    No, if the user has disabled javascript, he will just skip that whole validation process. You should really do that validation server side and/or style your HTML in a way that prevents long words from destroying your layout.

  • #12
    Regular Coder howie2009's Avatar
    Join Date
    May 2009
    Location
    Ireland
    Posts
    202
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Thanks. I have code that will redirect the user if javascript is disabled. After the user inputs say a long word and ignores the error alert can I call the function using the update/submit button on the page?
    Thanks

  • #13
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    You can of course call the validation onsubmit and return false as long as there are long words in the input, so the form does not actually get submitted, but doing it without server side validation won't be good enough.

    Just suppose someone with enabled JS wants to submit a text and then gets an alert box that he has to change the whole thing. Instead of doing so, he can just deactivate JS and submit the thing without hassle.


  •  

    Posting Permissions

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