Disable Submit Button Until Min Number Of Characters Entered

input_least is a jQuery script that disables the form submit button until the minimum number of characters have been entered in a specific text field.

Similar to the minlength attribute but more flexible. It also provides visual feedback that indicates how many characters have been entered.

How to use it:

1. Add the least CSS ID to the target text field.

<textarea id="least">
  ...
</textarea>

2. Create a character counter next to the text field.

<p id="least_count">( 0 ) You must enter at least 30 characters.</p>

3. Add the least CSS ID to the submit button.

<button id="least_button" type="submit">
  Submit
</button>

4. Load the latest jQuery library in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5. The main jQuery script to specify the minumum number of characters.

$(document).ready(function(){ 
  const target = document.getElementById('least_button');
  target.disabled = true;
  $('#least').on('keyup', function() {
    $('#least_count').html("( "+$(this).val().length+" ) You must enter at least 30 characters.");
    if($(this).val().length >= 30) {
      target.disabled = false;
    }
    else{
      target.disabled = true;
    }
  });
});

---

This awesome jQuery plugin is developed by delight-HK3. For more Advanced Usages, please check the demo page or visit the official website.