In this article I will explain with an example, how to set MaxLength for TextArea using jQuery in ASP.Net Core MVC.
The ASPSnippets MaxLength jQuery plugin will be used to set the MaxLength in the TextArea element in ASP.Net Core MVC.
 
 
Download ASPSnippets MaxLength Plugin
You can download the ASPSnippets MaxLength jQuery plugin using the link provided below.
Download ASPSnippets MaxLength Plugin
 
 
Using ASPSnippets MaxLength jQuery Plugin
The ASPSnippets MaxLength jQuery has the following required and optional parameters:-
1. MaxLength (required) – Integer value indicating the Maximum character length limit.
2. CharacterCountControl (optional) – By default the plugin will display character count below the TextArea, but user has option to explicitly specify the Character Count Control.
Note: The character count control can only be a HTML SPAN or DIV element.
 
3. DisplayCharacterCount (optional) – Default true. If set to false the Character counting will be disabled.
 
 
Controller
The Controller consists of following one Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}
 
 
View
The View consists of three TextArea elements for which the Maximum Length validation will be implemented and an HTML DIV element for displaying the Character Count for the second TextArea.
 
Implementing ASPSnippets MaxLength jQuery Plugin
Inside the jQuery document ready event handler, the ASPSnippets MaxLength jQuery plugin has been applied to all the three TextArea elements with three different configurations.
First TextArea – Default configuration. Maximum Length validation will be performed and Character count will be displayed.
Second TextArea – Maximum Length validation will be performed and Character Count will be displayed in a HTML DIV.
Third TextArea – Only Maximum Length validation will be performed.
Note: JS file does not work in ASP.Net Core unless it is placed in proper location within the project and also some settings need to be done. For more details, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        .error { color: red; font-weight: bold; }
    </style>
</head>
<body>
    <textarea id="Text1" rows="2" cols="20"></textarea>
    <br/>br/>
    <div id="counter" class="error"></div>
    <textarea id="Text2" rows="2" cols="20"></textarea>
    <br/>br/>
    <textarea id="Text3" rows="2" cols="20"></textarea>
    <script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/Scripts/MaxLength.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Default Configuration.
            $("#Text1").MaxLength({ MaxLength: 10 });
 
            //Specifying the Character Count control explicitly.
            $("#Text2").MaxLength({
                MaxLength: 15,
                CharacterCountControl: $('#counter')
            });
 
            //Disable Character Count.
            $("#Text3").MaxLength({
                MaxLength: 20,
                DisplayCharacterCount: false
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net Core MVC: Set Maxlength for TextArea using jQuery
 
 
Browser Compatibility
The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code