禁用提交按钮，直到textarea超过100个字符

Question

How can I disable the submit button until the chars of a textarea are more than 100 chars?

This is a code used to check if the user has selected to upload an image. Please inform me how should I name my textarea and guide me through the installation of it.

$(function() {
   $('form').submit(function() {
      if(!$("form input[type=file]").val()) {
         alert('You must select a file!');
         return false;
      }
   });
});

Answer 1

First of, make the submit button disabled, eg.

<input type="submit" disabled="disabled" id="submitid" />

Next you should write a function that will count the length of the textarea while the user is writing, this could be done by using the keyup function in jQuery or onkeyup in plain Javascript. Example in jQuery:

$("#textareaid").keyup(function () {
  if((this).val().length > 100) {
    $("#submitid").removeAttr('disabled');
  } else {
    $("#submitid").attr("disabled", "disabled");
  }
});

Note: code not tested.

SetInterval approach:

setInterval(function () {
  if($("#textareaId").val().length > 100) {
    $("#submitid").removeAttr("disabled");
  } else {
    $("#submitid").attr("disabled", "disabled");
  }
}, 500); //Runs every 0.5s

Full size example:

<form>
  <textarea id="textareaId"></textarea>
  <input type="submit" id="submitId" disabled="disabled" />
</form>
<script type="text/javascript">
  setInterval(function () {
    if($("#textareaId").val().length > 100) {
      $("#submitId").removeAttr("disabled");
    } else {
      $("#submitId").attr("disabled", "disabled");
    }
  }, 500); //Runs every 0.5s
</script>

Answer 2

You can either update the status of the submit button every time the data within the text area is changed, however this can be problematic as each browser has different events for textareas (in javascript)

A common way to do it is by setting an interval to check the submit box, then based on that decide the boolean value for the button. For instance

window.setInterval(function(){ $('#submitBtn').disabled =  $("#textArea").val().length < 100 }, 100);

(Code not tested)

Answer 3

Users much prefer it if the number of characters in textarea is validated on submit. If it's less than 100, cancel the submit and give the user an error message saying why. Presumably there's a hint on the page so the user should know of the 100 character criterion and how many characters they've entered.

If you really want the button disabled, then disable it using script when the page loads. Use a key-up listener to count the characters in the textarea and enable the submit button if there's more than 100. You may need to listed to other events too so if the user changes the text by dragging or paste, then the submit button's disabled property is updated appropriately.

Answer 4

Building on Minitech's rather terse answer:

$(function() {
    $('form').submit(function() {
        if(!$("form input[type=file]").val()) {
            alert('You must select a file!');
            return false;
        }

        if($("#theTextArea").val().length <= 100) {
            alert("You must enter more than 100 characters!");
            return false;
        }
   });
});

Just replace theTextArea with the id of the specific textarea you want to test