views:

51

answers:

2

I have a text area which gets filled in various ways including paste, keyboard input, from an autocomplete etc.

Now I want to validate this text area and if contains any combination, including multiples of some characters and if so, set it to empty.

The characters I want to filter are: tabs, new lines, spaces, carriage returns, as well as some watermark text - basically any non-meaningful character.

Note that valid text might contain special characters such as ()!#%<>,;:/||{}[] and possibly a few more.

Valid values might contain new lines, spaces etc. but will also have other valid characters (the stuff above plus 0-9, a-z, A-Z etc.)

Currently, I have the following wrapped in a jquery .change event:

<textarea cols="70" rows="3" class="cssTextarea cptEntryArea formFocus"></textarea>

$('.cptEntryArea').live('change', function(e)
{
    var myval = "";
    myval = $(this).val().trim();
    myval.replace(/\r\n|\r|\n|\u0085|\u000C|\u2028|\u2029|^\s*$|^\s+|\s+$/g, "");
    if ((myval == watermarkText) || (myval.length == 0))
    {
        $(this).val("");
        e.stopPropagation();
        return false;
    };
});

The idea is to simply blank it out if it has "non-visual" characters in it in any combination.

Any optimization or better method to get this done?

EDIT1: Looks like I can do some adjustment here as the jQuery trim is:

trim: function( text ) {
        return (text || "").replace( /^\s+|\s+$/g, "" );
    }
A: 

Sounds like a very strange thing to do. What is the watermarkText for? Would it not be a better idea to catch before the text is put into the textarea i.e. on keydown, return null if the ascii value < 33? Your event only fires when the item is changed/lost focus, not immediately when some text is entered.

You could try doing /mg for the regex multi-line.

Gary Green
Watermark text is part of a watermark plug-in and is used to indicate a blank - so people are give an action clue. There are multiple of these fields. As for key strokes, it gets complicated with the autocomplete - for instance Enter selects an option, but only if > 2 characters are entered first. Tab goes to next field in the group etc. SO the change event is correctly the one to use here.
Mark Schultheiss
I will test the /mg per suggestion
Mark Schultheiss
accepting as the closest answer that gave assistance, thanks.
Mark Schultheiss
A: 

As it ended up, I had to manage my keystrokes more efficiently as well as the event management of the end result. My solution is a quite complex interactive page where multiple methods are used to populate the value with configurable options of which group of methods and the acceptable values that are allowed, thus the complexity of the resolution.

various methods used to populate the textarea:

  • Free form (user entered)
  • Autocomplete - validated against and choosen from a user entered string to produce the select list.
  • Text MUST match the database exactly
  • Freeform text allowed, but the associated ID must be in the database
  • New user text allowed, but must be posted as a new value to the select list
  • programatic population (pull from database/other value and populate)

All of this makes the validation rules complex however the other answer is being accepted as it best helped resolve the issue.

Note that there are actually multiple keystrokes that get in play here with various actions based on the keystroke and the options in play for a particular user.

Thanks to everyone for the assistance.

Mark Schultheiss