Disable Submit Button Until Min Number Of Characters Entered
File Size: | 3.61 KB |
---|---|
Views Total: | 809 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.