Welcome to the Learning Center

The Guide | Knowledge Base | FAQ

Browse it all or refine your selection using the filters below on the left.

MaxLength For TextArea

Steps showing how to use a regular expression to limit the number of characters - in XMod Pro and XMod

By: Kelly Ford On: 10/09/2009

Link to this Article
https://dnndev.com/Learn/Guide/Article/MaxLength-for-TextArea

With XMod Pro and XMod, you can limit the length of the text entered through a <textbox> (<input> for XMod). However, you cannot limit the length of text in a <textarea >. The reason stems from the underlying TEXTAREA HTML tag that is ultimately rendered for the control which has no maxlength property unlike the HTML INPUT tag which does. Fortunately, both XMod Pro and XMod provide a way for you to implement a maximum length for the control.

Use the Regular Expression Validator

Regular expressions can seem convoluted and hard to grasp and I'll do nothing to dispel that notion here. However, regular expressions can be quite powerful. They can allows you to match phone numbers, email adresses, and many more complex patterns. In our case, we'll use a regular expression to limit the number of characters and it's mercifully simple.

XMod Pro Example

<AddForm>

  ...

  <Label For="MyLongText" Text="Enter Your Long Text:" />

  <TextArea Id="MyLongText" Width="400" Height="100" DataField="MyLongText" DataType="string" />

  <Validate Type="regex" Target="MyLongText" 
  
  	ValidationExpression="^[\s\S]{0,100}$" 
  
  	Message="Your text must be 100 characters or less" />

  ...

</AddForm>

XMod Example

<form>

  ...

  <textarea ref="MyLongText" width="400" height="100">

    <label>Enter Your Long Text:</label>

    <validate type="regexp" 

      expression="^[\s\S]{0,100}$" 

      message="Your text must be 100 characters or less" />

  </textarea>

  ...

</form>

In the sample forms above, I've eliminated all the extra tags that would normally show up in a form to focus only on the problem at hand.

XMod Pro

I've added a label for the control (line 3) and a <TextArea> control (line 4). It has an ID of "MyLongText". In lines 5-7 I've added a regular expression validator. It is set to validate "MyLongText" and has a ValidationExpression of "^[\s\S]{0,100}$"

XMod

For simplicity, this is an auto-layout form. I've added a <textarea> tag (lines 3-8). It has a ref of "MyLongText" . In lines 5-7 I've added a regular expression validator. Since it is a child tag of <textarea> it is automatically set to validate "MyLongText" and has its expression attribute set to "^[\s\S]{0,100}$"

Explaining the Regular Expression

This regular expression simply says:

  • ^: Start at the beginning of the text

  • [\s\S]: Match any character that is considered whitespace (spaces, tabs, etc.) and ALSO match any character that is NOT considered whitespace. The net effect is match every character.

  • {0,100}: Match a minimum of 0 characters and a maximum of 100 characters. This is the key part of the expression and the one you'll want to customize for your own needs. If we wanted the text to be no longer that 50 characters, we'd change this to: {0,50}. Should we require the text be between 10 and 20 characters, the expression would change to: {10,20}.

  • $: Don't stop matching until you reach the end of the text.

In plain English we're saying "Look at the whole text (^ and $). Match any character ([\s\S]) and make sure that up to 100 characters are matched. It can be less – zero characters even – but cannot be more than 100."