Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I would like to hide/lock the submit button to prevent comments with 15 characters or less
for subscriber and contributers in the comment section below postings/pages.
It should automaticly be visible/unlocked as soon there is an input of >15 characters.
(Prevents also (if possible at all) sending users to the error page if there is no input at all)

Having a max of 500 characters and then a lock on the submit btn when there are to many characters would also be nice.
(Research show options for minimum characters but result in sending to the so named
error page of Wordpress. Possible that my research wasn't correct, if so, sorry.)

share|improve this question

1 Answer 1

up vote 0 down vote accepted

The easiest way to achieve this is to use jQuery on the client side to handle this validation. There are a number of ways you can achieve this, though one of the easiest would be to use a ready made solution of which one can be found HERE

You'll need to download the plugin file and include it within your header.php file like so;

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/charCount.js"/></script>

Directly beneath the above line you will then place the following;

<script type="text/javascript">
     jQuery(document).ready(function(){
         //custom usage
         $("#txtTweet").charCount({
             allowed: 500,
             minChar: 15,
             warning: 20,
             counterText: 'Characters left: ',
             disableControl: '#btnSubmit',
             isDisable: true // is the control disable or not
         });
 });
 </script>

Make sure that the above snippets of code are placed within your;

<head>

    // usual head stuff here

    <?php wp_head();?>

    // include the charCount.js

    // include the custom usage snippet

</head>

The reason you include your files after wp_head is that this function will usually output your jQuery.js file which needs to be declared before your charCount.js and custom code to work correctly.

That link again is HERE - for which you can see a working demonstration.

share|improve this answer
    
Really, you should be wp_enqueue_scripting those scripts with a dependency on jQuery. +1 for the script, -1 for not using wp_enqueue_script. –  EAMann Jun 4 '12 at 15:29
    
@EAMann Yes you should! There are advantages in doing so. However the above method is acceptable and compliant, though if the user wishes to do so please read up on wp_enqueue_script for which you can then place the above custom snippet into its own Javascript file custom-char.js and place it in the same folder as your charCount.js file. (when enquing files you will be working with your functions.php file instead of your header.php file). +1 for suggesting wp_enqueue_sript, -1 for no answer/link/explanation. :D –  userabuser Jun 4 '12 at 15:50
    
No link/explanation because I know you know wp_enqueue_script :-) And I didn't leave a separate answer because your answer will work ... assuming jQuery is already loading. That's not the case with all themes. –  EAMann Jun 4 '12 at 15:52
    
@userabuser The code&scripts works when I follow the explanation and the sample in your link. But that creates a "new" comment_field. (putting scripts & code in the head and using the html form code out the sample in a posting which wasn't meant to do I assume) Maybe I didn't explain well enough, I am not looking for a "new" comment_field but want to use above code or simular on the existing comment_field. Assuming not to mess around with the core comment-template.php I am not able to do as wished. Would appreciate to be enlighten a little more if possible. –  Charles Jun 5 '12 at 1:39
    
@Charles Hi, I did not say to copy the form fields or html from the download file at the provided link. Only the charCount.js file and the snippet example provided here is what you need. You need to modify the example here disableControl: '#btnSubmit', to match your CSS selector for the comment submit button on your existing theme. The HTML content provided in that download is demonstration only from the author. –  userabuser Jun 5 '12 at 5:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.