Back to prototypes
Textarea
Contents
Character limits
Example
HTML Snippet for textarea character limit
<form>
<div class="form-group">
<label class="form-label form-label-bold" for="AdditionalInfo">
Do you know anything about the person(s) responsible for the issue? (optional)
<span class="form-hint">500 character limit</span>
</label>
<textarea class="form-control form-control--limited" cols="20" data-val="true" id="AdditionalInfo" name="AdditionalInfo" rows="5" maxlength="500" aria-describedby="label--charactersremaining"></textarea>
<span id="label--charactersremaining" class="form-hint form-hint__remaining" aria-live="polite">You have 500 characters remaining</span>
</div>
</form>JS Snippet for textarea character limit
$('.form-control--limited').each(function() {
$(this).on("input", function(){
var maxlength = $(this).attr("maxlength");
var currentLength = $(this).val().length;
if( currentLength >= maxlength ){
$(this).parent().find('.form-hint__remaining').html('You have 0 characters remaining');
}else{
var remaining = maxlength - currentLength;
$(this).parent().find('.form-hint__remaining').html('You have '+remaining+' characters remaining');
}
});
});Error handling
Example
HTML Snippet for textarea character limit
<form>
<div class="form-group form-group-error">
<label class="form-label form-label-bold" for="AdditionalInfo">
Do you know anything about the person(s) responsible for the issue?
<span class="error-message">Error message goes here</span>
</label>
<textarea class="form-control form-control--limited" cols="20" data-val="true" id="AdditionalInfo" name="AdditionalInfo" rows="5" maxlength="500" aria-describedby="label--charactersremaining"></textarea>
<span id="label--charactersremaining" class="form-hint form-hint__remaining" aria-live="polite">You have 500 characters remaining</span>
</div>
</form>