Javascript or Jquery textarea counter with minimum text length?

Question

I can't find any examples when you want the user to input at least x number of characters in a textarea. There is no max length, only minimum. Is there any simple solutions to this?

This is what I have now.

A simple textarea

Div area showing x characters remaining to write

Characters left

If possible, disable post button until x characters reached.

user_11582068 · Answer



  
    
    
    
    Document

user_18845897 · Answer

This is done with jq:

$(document).ready(function(){

//Set this to whatever size you want 
var characterSize = ;
$("#charCount").text(characterSize);

$("#textComment").keyup(function() {
    
  count = $("#textComment").val().length;
  
  if(count < characterSize){
  $("#charCount").text(characterSize - count);
  }
  else
  {
    $("#charCount").text(0);
  }

  if ($("#textComment").val().length >= characterSize){
  $("button").attr('onclick', 'frmComment.submit()', 'return false');
  }

  else {
    $("button").removeAttr('onclick', null);
   }
     
});
});

Change the HTML to this:

    

    Characters left:

When the user inserts more than X characters jq will kick in and give the button the onclick property. Before reaching the character limit the button will do nothing. And if the user writes more than X characters and then erases some and the number falls below X the button will once again do nothing.

I imagine it could be simplified but this way you can understand how it works.

user_16852506 · Answer

You can change the minimum length on textarea element => data-minLength="10"

$(document).ready(function() {
 $("#textComment").on("keyup", function(){
     var minLength = $(this).attr("data-minlength");
     var currentLength = $(this).val().length;
     var remaining = parseInt(minLength) - parseInt(currentLength)
     $("#charsLeft").text((remaining < 0 ? 0: remaining));
     
     if (parseInt(currentLength) < parseInt(minLength))
     {
         $("#commentBtn").prop("disabled", true);
     } else{
         $("#commentBtn").prop("disabled", false);
     }
     
     
 });
});



Characters left:

Javascript or Jquery textarea counter with minimum text length?

3 Answers