In web forms, it’s often necessary to limit the number of characters users can enter. However, rather than simply restricting input, providing clear feedback like “how many characters can be entered” and “what happens if the limit is exceeded” results in a more user-friendly UI.
This article explains how to use the jQuery plugin jquery.maxcharwarning.js to automatically display an alert message when a character limit is exceeded during text input. The article includes detailed CSS, HTML, and JavaScript code examples so that even beginners can implement it easily.
If you’re looking for an easy way to implement input limits or want to enhance your form’s usability, this article will be a helpful guide.
- CSS for Displaying a Character Limit Alert Message on Input
- HTML for Displaying a Character Limit Alert Message on Input
- JavaScript to Display a Character Limit Alert Message on Input using jquery.maxcharwarning.js
- Demo Page: How to Display a Character Limit Alert Message on Input using jquery.maxcharwarning.js
- Source: Maximum Characters Limit Exceeded Warning
- Conclusion
CSS for Displaying a Character Limit Alert Message on Input
* CSS for the input area and the alert message (.input-error). Please modify as needed.
<style type="text/css">
body{
text-align: center;
padding: 20px;
font-size: 16px;
line-height: 1.8em;
}
h1{
text-align: center;
font-size: 32px;
line-height: 1.4em;
}
ul{
list-style:none;
padding:0;
}
li{
margin-bottom:2em;
}
li span{
color: red;
display: block;
}
.input-error{
border:2px solid red;
}
input{
padding:10px;
border-radius:4px;
font-size:16px;
}
</style>
HTML for Displaying a Character Limit Alert Message on Input
* Add the following attributes to the input tag.
<input
class="character-limit input area"
data-max-length-warning="alert message"
data-max-length="character limit"
data-max-length-warning-container="alert message output destination class name"
placeholder="placeholder character"
type="text"
/>
<span class="alert message output destination class name"></span>
* Below is an example with two input fields and corresponding alert messages. The alert message is output to the element with the class name specified in data-max-length-warning-container. Modify as needed.
<h1>Displays a character limit alert message when entering text. <br>Below, we have provided input areas with a maximum of 10 and 15 characters. <br>Please try entering more than the maximum number of characters. </h1>
<ul>
<li>
<input
class ="chk"
data-max-length-warning="Please enter 10 characters or less"
data-max-length="10"
data-max-length-warning-container="name"
placeholder="Please enter a name of 10 characters or less"
type="text"
/>
<span class="name"></span>
</li>
<li>
<input
class ="chk"
data-max-length-warning="Maximum 15 characters"
data-max-length="15"
data-max-length-warning-container="address"
placeholder="Enter your address (up to 15 characters)"
type="text"
/>
<span class="address"></span>
</li>
</ul>
JavaScript to Display a Character Limit Alert Message on Input using jquery.maxcharwarning.js
* Load jquery.min.js and jquery.maxcharwarning.js files. Use $(selector).maxCharWarning(). Modify as needed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.maxcharwarning.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.chk').maxCharWarning();
});
</script>
Demo Page: How to Display a Character Limit Alert Message on Input using jquery.maxcharwarning.js
Demo page for displaying a character limit alert message on input using jquery.maxcharwarning.js
Source: Maximum Characters Limit Exceeded Warning
Here is the source:
Maximum Characters limit exceeded warning
Conclusion
With jquery.maxcharwarning.js, you can easily display alert messages that clearly notify users about character limits in input forms. By styling with CSS, setting required attributes in HTML, and controlling behavior with JavaScript, implementation is quick and simple.
Especially by providing clear input feedback to users, you can help prevent errors and reduce bounce rates.
Please refer to this article and try incorporating user-friendly form design.
* Please use at your own risk if reusing this code.
Do not copy the Google Analytics tag inside the <head> tag of the demo page.
