June 18, 2020: Updated to fix a bug “countWords”: true.
June 22, 2020: Updated to fix a bug where some of the code was missing in the snippet.
I have updated this old solution to work with DFFS. Please note that it supports multiline PLAIN text fields only – no rich text / HTML.
Add this to your Custom JS:
function counterForMultiLinePlain(arg) {
jQuery("#dffs_" + arg.fin).find('textarea').bind('keyup blur', function(e) {
var thisLength = jQuery(this).val().length; // Characters
var prefix = "";
if (arg.countWords && thisLength > 0) { // Count words
thisLength = jQuery(this).val().split(/[' '|\n]/).length;
}
// Color code
if (arg.colorCodeCounter) {
if ((arg.max > 0 && thisLength >= arg.max) || thisLength < arg.min) {
jQuery("#myCustomCounter_" + arg.fin).css({
'background-color': '#da2931',
'font-weight': 'bold',
'color': 'white'
});
} else if (arg.max > 0 && thisLength > (arg.max - 10)) {
jQuery("#myCustomCounter_" + arg.fin).css({
'background-color': '#FF6600',
'font-weight': 'bold',
'color': 'white'
});
} else {
jQuery("#myCustomCounter_" + arg.fin).css({
'background-color': 'transparent',
'font-weight': 'normal',
'color': 'black'
});
}
}
// Min
var belowMin = false;
if (arg.min > 0 && thisLength < arg.min) {
prefix = arg.minLimitLabel.split("{0}").join(arg.min - thisLength);
belowMin = true;
}
// Max
if (!belowMin && arg.max > 0) {
prefix = arg.maxLimitLabel;
if (arg.countWords) { // Count words
while (thisLength > arg.max) {
currVal = jQuery(this).val();
jQuery(this).val(currVal.substring(0, currVal.lastIndexOf(' ')));
thisLength--;
}
} else { // Count characters
if (thisLength > arg.max) {
currVal = jQuery(this).val();
jQuery(this).val(currVal.substring(0, arg.max));
}
}
prefix = arg.maxLimitLabel.split("{0}").join(arg.max - thisLength < 0 ? 0 : arg.max - thisLength);
}
jQuery("#myCustomCounter_" + arg.fin).html(prefix);
}).after("<div id='myCustomCounter_" + arg.fin + "' style='padding:2px 4px;margin-top:2px;'></div>").trigger("keyup");
}
// Call the function like this
counterForMultiLinePlain({
"fin": 'MultilinePlainText',
"countWords": false,
"min": 50,
"max": 0,
"colorCodeCounter": true,
"minLimitLabel": "You must add {0} additional characters",
"maxLimitLabel": "Remaining characters: {0}"
});
Look at the “Call the function like this” section and change the “fin” parameter and adjust the limits and labels – leave min and max as 0 to disable min or max check.
Let me know if you have any questions.
Alexander
If you want to prevent save if the minimum number of characters have not been provided, you can add this to your Custom JS:
function dffs_PreSaveAction(){ var val = getFieldValue("Your_Multiline_Field_Name"); var submit = getFieldValue("Your_Submit_Form_Field_Name"); if(submit && val.length < 100){ spjs.dffs.alert({ "title": "Unable to save", "msg": "You must add a minimum of 100 characters in the Description field to be able to submit this form." }); return false; } return true; }This will not allow save if the “Your_Submit_Form_Field_Name” field (Boolean Yes / No) is checked and your minimum character count is not added to the field.
Change “Your_Multiline_Field_Name” and “Your_Submit_Form_Field_Name” to match your field names and the number 100 to match your minimum character count.
Please note that you can only have one function with the same name in your page. This means that if you already have dffs_PreSaveAction defined in your page, this snippet must be merged into your existing function.
Alexander