By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,652 Members | 1,905 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,652 IT Pros & Developers. It's quick & easy.

validate textarea

P: 4
I found an external js that works GREAT for my text fields.. but will not work on my textarea.

Help?
Expand|Select|Wrap|Line Numbers
  1.  
  2. /**
  3.  * InputFilter.js: unobtrusive filtering of keystrokes for <input> elements
  4.  *
  5.  * This module finds all <input type="text"> elements in the document that
  6.  * have an "data-allowed-chars" attribute. It registers keypress, textInput, and
  7.  * textinput event handlers for any such element to restrict the user's input
  8.  * so that only characters that appear in the value of the attribute may be
  9.  * entered. If the <input> element also has an attribute named "data-messageid",
  10.  * the value of that attribute is taken to be the id of another document
  11.  * element. If the user types a character that is not allowed, the message
  12.  * element is made visible. If the user types a character that is allowed, the
  13.  * message element is hidden. This message id element is intended to offer
  14.  * an explanation to the user of why her keystroke was rejected. It should
  15.  * typically be styled with CSS so that it is initially invisible.
  16.  *
  17.  * Here is sample HTML that uses this module.
  18.  *   Zipcode: <input id="zip" type="text"
  19.  *                   data-allowed-chars="0123456789" data-messageid="zipwarn">
  20.  *   <span id="zipwarn" style="color:red;visibility:hidden">Digits only</span>
  21.  *
  22.  * This module is purely unobtrusive: it does not define any symbols in
  23.  * the global namespace.
  24.  */
  25. whenReady(function () {  // Run this function when the document is loaded
  26.     // Find all <input> elements
  27.     var inputelts = document.getElementsByTagName("input");
  28.     // Loop through them all
  29.     for(var i = 0 ; i < inputelts.length; i++) {
  30.         var elt = inputelts[i];
  31.         // Skip those that aren't text fields or that don't have
  32.         // a data-allowed-chars attribute.
  33.         if (elt.type != "text" || !elt.getAttribute("data-allowed-chars"))
  34.             continue;
  35.  
  36.         // Register our event handler function on this input element
  37.         // keypress is a legacy event handler that works everywhere.
  38.         // textInput (mixed-case) is supported by Safari and Chrome in 2010.
  39.         // textinput (lowercase) is the version in the DOM Level 3 Events draft.
  40.         if (elt.addEventListener) {
  41.             elt.addEventListener("keypress", filter, false);
  42.             elt.addEventListener("textInput", filter, false);
  43.             elt.addEventListener("textinput", filter, false);
  44.         }
  45.         else { // textinput not supported versions of IE w/o addEventListener()
  46.             elt.attachEvent("onkeypress", filter); 
  47.         }
  48.     }
  49.  
  50.     // This is the keypress and textInput handler that filters the user's input
  51.     function filter(event) {
  52.         // Get the event object and the target element target
  53.         var e = event || window.event;         // Standard or IE model
  54.         var target = e.target || e.srcElement; // Standard or IE model
  55.         var text = null;                       // The text that was entered
  56.  
  57.         // Get the character or text that was entered
  58.         if (e.type === "textinput" || e.type === "textInput") text = e.data;
  59.         else {  // This was a legacy keypress event
  60.             // Firefox uses charCode for printable key press events
  61.             var code = e.charCode || e.keyCode;
  62.  
  63.             // If this keystroke is a function key of any kind, do not filter it
  64.             if (code < 32 ||           // ASCII control character
  65.                 e.charCode == 0 ||     // Function key (Firefox only)
  66.                 e.ctrlKey || e.altKey) // Modifier key held down
  67.                 return;                // Don't filter this event
  68.  
  69.             // Convert character code into a string
  70.             var text = String.fromCharCode(code);
  71.         }
  72.  
  73.         // Now look up information we need from this input element
  74.         var allowed = target.getAttribute("data-allowed-chars"); // Legal chars
  75.         var messageid = target.getAttribute("data-messageid");   // Message id
  76.         if (messageid)  // If there is a message id, get the element
  77.             var messageElement = document.getElementById(messageid);
  78.  
  79.         // Loop through the characters of the input text
  80.         for(var i = 0; i < text.length; i++) {
  81.             var c = text.charAt(i);
  82.             if (allowed.indexOf(c) == -1) { // Is this a disallowed character?
  83.                 // Display the message element, if there is one
  84.                 if (messageElement) messageElement.style.visibility = "visible";
  85.  
  86.                 // Cancel the default action so the text isn't inserted
  87.                 if (e.preventDefault) e.preventDefault();
  88.                 if (e.returnValue) e.returnValue = false;
  89.                 return false;
  90.             }
  91.         }
  92.  
  93.         // If all the characters were legal, hide the message if there is one.
  94.         if (messageElement) messageElement.style.visibility = "hidden";
  95.     }
  96. });
  97.  
Jan 28 '14 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
cf. line #3 & #5. a <textarea> element is not an <input> element.
Jan 29 '14 #2

Post your reply

Sign in to post your reply or Sign up for a free account.