Show only comment textarea, if entered something show required fields for anonymous user

Question

I want to make commenting easy for anonymous users. "Anonymous posters must leave their contact information." is enabled.

What I want to do is to show only the comment text field at first and if the user enter some text (more than 20 characters etc) then show the other fields (name, e-mail, homepage).

I think it will be better not to show 3-4 empty fields instead of one text area to comment. First, focus on the comment (content) and then the required fields.

Is there any out of the box solution for this or if anybody did that before?

Answer 1

Paste in file template.php

function MYTHEME_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'comment_node_blog_form') {
    $form['author']['name']['#attributes']['class'][] = 'validate[required]';
    $form['author']['mail']['#attributes']['class'][] = 'validate[required,custom[email]]';
    $form['comment_body']['und'][0]['#attributes']['class'][] = 'validate[required,minSize[20]]';
    $form['#attached']['js'][] = drupal_get_path('theme', 'MYTHEME') . '/js/jquery.validationEngine-en.js';
    $form['#attached']['js'][] = drupal_get_path('theme', 'MYTHEME') . '/js/jquery.validationEngine.js';
    $form['#attached']['js'][] = drupal_get_path('theme', 'MYTHEME') . '/js/scripts.js';
  }
}

change form_id with your form comment

Source jQuery validate and file scripts.js

(function ($) {
    $(document).ready(function(){
        $("#comment-form").validationEngine();
        $('#comment-form').find('.form-type-textfield').hide();
        $('#edit-comment-body').keyup(function() {
            var value = $(this).find('.text-full').val(),
                lenght = value.length;
            if (lenght > 20) {
                $('#comment-form').find('.form-type-textfield').show();
            }
            else {
                $('#comment-form').find('.form-type-textfield').hide();
            }
        });
    });
})(jQuery);

Form with empty text

Form with more 20 characters

Answer 2

You need to have an js file to hide and show elements , if you dont know how to write that code , read Jquery text change event , jquery hide and jquery show . now in your module file Implement form-alter for comment form , and add your js file to form using :

 function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == *****){//find comment form id using firebug
    $form['#attached']['js'][] = array(
      'data' => drupal_get_path('module', 'MODULE_NAME').'/js/myscript.js', 
      'type' => 'file',
    );
  }
}

if you don't know how to find comment form_id look here : http://www.digett.com/blog/05/26/2011/how-theme-comment-form-drupal-7

Answer 3

To do so you can use Field Conditional States or Conditional Fields modules.

Conditional Fields allows you to manage sets of dependencies between fields. When a field is “dependent”, it will only be available for editing and displayed if the state of the “dependee” field matches the right condition. When editing a node (or any other entity type that supports fields, like users and categories), the dependent fields are dynamically modified with the States API. You can, for example, define a custom “Article teaser" field that is shown only if a "Has teaser" checkbox is checked

These dependencies are not only between the fields of the content type but also between the fields of the comment fields as well. As an example

These modules allows you set dependencies among the fields of comments as well, As you can see Comment Dependencies is for doing such thing:

You can also use Field formatter conditions module. This module changes the format of fields in manage display base on conditions of other fields.

Adds conditions to field formatters. Configuration happens on the "Manage Display" screens of every entity type on a per field basis when clicking on the cogwheel on the right.

So by this module you can

• Hide source field when target field is empty.
• Hide source field when target field is not empty.
• Hide source field when current user has specific roles.
• Hide source field on specific pages.
• Hide source field when target field contains a specific string.
• Hide source field when target field doesn't contain a specific string.
• Hide link field if title is empty.
• Hide date field if from/to has expired.