0

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.

Commenting should be easier!


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

  • You can do it with jQuery. Or do you want to use form ajax? – MrD Jul 4 '15 at 20:09
  • @MrD; yes, it can be done with jQuery. – herci Jul 4 '15 at 20:53
  • so what do you want in your question? – MrD Jul 4 '15 at 21:02
  • "Is there any out of the box solution for this or if anybody did that before?" And only knowing it can be done with jQuery isn't enough. – herci Jul 4 '15 at 21:03
  • 1
    I think you need to disable the required field or it won't work with JS if someone's comments is less than 20 characters. drupal_add_js in a form_alter + change form required array to null. – GwenM Jul 14 '15 at 12:28
3
+50

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

enter image description here

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 empty text

Form with more 20 characters

Form with more 20 characters

  • Your answer looks perfect for the case and it also gave me some other ideas to use in forms. Thanks, thanks a lot. – herci Jul 15 '15 at 7:23
  • If you clarify your question at first, I may have solution for you. – MrD Jul 15 '15 at 7:43
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

1

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

enter image description here

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

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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