[Resolved] Limit field characters number with countdown

[Author]

Posts

[pradipB]

Hi, i've used a generic wordpress field in one of my forms and i would like to limit the number of authorized characters
the field is the "post content" element (see the screenshot attached)
and i would like to have if possible a countdown of remaining characters and an error message when the users hits submit with the max allowed characters

The others features will be bonuses but the most important il to be able to limit the number of characters

Also, excuse my english (i'm french), i hope it's clear enough

here is the field in HTML
<div class="form-group col-md-1.5">
<label for="%%FORM_ID%%_post_content">[cred_i18n name='post_content-label']Description de la formation[/cred_i18n]</label>
[cred_field field='post_content' output='bootstrap']
</div>

thanks

[Luo Yang]

Hello,

There isn't such kind of built-in feature within Toolset plugins, you can consider custom codes, for example, see the solution of below similar thread:
https://toolset.com/forums/topic/cred-field-wysiwyg-post_content-max-words/#post-1903573

[pradipB]

The solution does'nt work
i don't know how to edit Javascript
could you give me the exact code i have to write for my case ? thanks

[Luo Yang]

According to our support policy, we don't provide custom codes support, and I have tried the solution I mentioned above, it works fine in my localhost with a fresh WP installation + the latest version of Toolset plugins.

And it is only an example for your reference, if you need more assistance for it, please provide a test site, fill below private message box with login details, also point out the problem page URL + form URL, I can setup a demo for you

[Luo Yang]

I have tried the credentials you provided above, but get 404 errors, please check it, make sure your test site is ready for debug, and update here.

[pradipB]

i've updated the credentials, it should be ready now

[Luo Yang]

Thanks for the details, I have setup a demo in your website:
1) Create a post form with the same JS codes:
hidden link

document.addEventListener('DOMContentLoaded', function(event) {
    window.tinyMCE.on( 'AddEditor' , function( event ) {
        var editor = event.editor;
  
        if( editor.id.endsWith( 'post_content' ) ) {
            var editor_id = editor.id; // tinyMCE ID
            editor.on( 'change', function() {
                    var getContent = editor.getContent();         // gets the Content of the active editor
                    var count= getContent.split(" ").length;
                    if(count > 10){
                       alert( 'Too much words: ' + count );
                    }
            } )
        }
    } );
});

2) Test it in frontend:
hidden link

It works fine, see my screenshot limit-field.jpg

The warning message will be triggered after you input something into the post content, and click some other places.

It is only a demo for your reference.

[pradipB]

The pop up message works fine but you still can submit the form after you hit ok, so how can i block users to submit the form when that field has too much characters ?

[Luo Yang]

I have modified the JS codes as below:

document.addEventListener('DOMContentLoaded', function(event) {
    window.tinyMCE.on( 'AddEditor' , function( event ) {
        var editor = event.editor;
  
        if( editor.id.endsWith( 'post_content' ) ) {
            var editor_id = editor.id; // tinyMCE ID
            editor.on( 'change', function() {
                    var getContent = editor.getContent();         // gets the Content of the active editor
                    var count= getContent.split(" ").length;
                    if(count > 10){
                       alert( 'Too much words: ' + count );
                       jQuery('input[type="submit"]').hide();
                    }else{
                    	jQuery('input[type="submit"]').show();
                    }
            } )
        }
    } );
});

It will hide the submit button if the words counts are more than 10, and show the submit button less than 10

[pradipB]

My issue is resolved now. Thank you!