jquery detect change in class assignment

Question

Does anyone know a way to detect when a given element's class has changed using JQuery?

I'm using the "simply countable" JQuery plug-in to notify the user of the number of characters entered into a text area. When the user exceeds the allowed number of characters, I would like to disable the "post" button.

Since simply countable changes the assigned CSS class when the limit is reached, my idea was to capture that event so that I could disable the post button, but perhaps there is a better way?

Any suggestions are welcome.

Thanks.

Answer 1

I do not know of anything that currently exists, but you could write a plugin to jQuery that fires a custom event whenever the class name is modified (via jQuery).

Answer 2

You can try jQuery Validation Plugin.

Answer 3

You could have an event on keypress or up (for the text area) that checks to see if the maximum number of characters has been reached, and fire off appropriate logic.

$(textarea).keypress(function (e) {
       if(getLetterCount() > 300){
           $(postButton).css('disabled', 'true');
       else
           $(postButton).css('disabled', 'false');
       }
 });

Answer 4

Assuming you need to block the control, not to intercept the class change, you can just rewrite the plugin part responsible for action (class addition).

Answer 5

There's no such event. What you need to do is tweak the plugin to fit your needs.

Go look through the code. Anywhere it calls addClass(options.overClass) you need to disable your button. Anywhere it calls addClass(options.safeClass) you need to enable your button. Simple.

Answer 6

Do you mean something like this?

<script>
   $("#myTextArea").change(function(){
       var contentLength = $(this).val().length; 
       var charLimit = 500;
       if(contentLength > charLimit){
           $("#saveButton").attr("disabled","disabled");
       }

   });

</script>


<textarea id="myTextArea"></textArea>
<input type="submit" id="saveButton">