kagorastidis
10/18/2016 - 11:06 AM

Char counter for inputs / text areas. Adds a <p> element under the given input that counts the chars left. Min length is a helper to help hi

Char counter for inputs / text areas. Adds a

element under the given input that counts the chars left. Min length is a helper to help hide the form input validate fails. Maybe refactor to one function. Min Length requires input to have a minlength attr

minLength.js
content_copyfile_download
var _checkMinLength = function (selector) {
	if(jQuery(selector).val().length >= jQuery(selector).attr('minlength')) {
		return true;
	}
	else {
		return false;
	}
}

var _validate = function (selectors , inputControl) {
	jQuery(selectors).keyup(function(e) {
		if(_checkMinLength(YOUR_SELECTOR) && _checkMinLength(YOUR_OTHER_SELECTOR)) {
			jQuery(inputControl).removeClass('hidden');
		}
		else {
			jQuery(inputControl).addClass('hidden');
		}
	});
}
charCounter.js
content_copyfile_download
var charCounter = (whereToAttach, textFieldId, maxChar, minChar) => {
	jQuery(textFieldId).attr('maxlength',maxChar).attr('minlength',minChar);
	jQuery(whereToAttach).append('<p class="char-count"></p>');
	var textHolder = whereToAttach+' .char-count'
	jQuery(whereToAttach).keyup( () => {
		var max = maxChar;
		var min = minChar;
		var len = jQuery(textFieldId).val().length;
		var incompleteTxt = jQuery(textFieldId).val();
			if( len < min) {
				jQuery(textHolder).html('<p class="pink-text">Δεν έχετε συμπληρώσει το επιτρεπτό όριο χαρακτήρων. Παρακαλούμε συνεχίστε να γράφετε</p>');
			}
			else if (len >= max) {
				jQuery(textHolder).html('<p class="pink-text">Έχετε ξεπεράσει το επιτρεπτό όριο χαρακτήρων</p>');
		
				}
			else {
				var count = max-len;
				jQuery(textHolder).html('Απομένουν <b>'+count+'</b> χαρακτήρες απο '+max);
			}
	});
}