making comments box required in Forms with javascript

asked on March 27, 2017

I realize there has been some discussion on this (including a feature request), but I am looking for some assistance with a javascript work-around. Specifically, I would like to either (i) make the Comments box required conditionally when user clicks "Reject" or another action button, or (ii) make the Comments box required all the time.

The typical code I use to make a field required with js is:

            $('.fieldname label').append('<span class="cf-required">*</span>');
            $('.fieldname input').prop('required', true);

where .fieldname is the field identifier. Trying to apply this to the Comments box, I use:

            $('#comments').append('<span class="cf-required">*</span>');
            $('#comments').prop('required', true);

The problems are:

I can't get the asterisk on the Comments box because it doesn't have a <label> area to target. The "Comments" text is just in a <p>...</p> line in the container, not in a <span> element or <label> element. Tried a bunch of targets, but not able to get the asterisk to display to the user. This is an inconvenience, but not too bad.
Applying the required property works - if there is no input in the Comments box, the form turns the box red and displays "Value is required." However, if you click an action button, all the other fields on the forms disappear (as though it were submitted), but the Comments box remains there and in its "red" state. The form doesn't actually submit - if you close the form, it remains in your Task Inbox and can be opened again. This one is more than an inconvenience, it breaks the user experience. I tried both Chrome and Firefox, same behavior. Forms v10.2.

Any ideas or suggestions, esp on #2?

Thanks, ..... Steven.

1 0

SELECTED ANSWER

replied on March 28, 2017

1. Maybe you can try this to add asterisk after Comments:

$('#comments').prev().attr('style','display:inline;');
$('#comments').before('<span class="cf-required" style="display:inline-block;margin:0 0 10px;">*</span>');

2. Probably you need to manually do something to avoid that situation. Forms begins to use Parsley since 10.2, the following snippet is a complete example of adding the required asterisk all the time, and when reject the form it will check the comments first before validating other fields. I hope this explains the concept clearly. Maybe try adjusting your code along with that, hope it will help.

$(document).ready(function () {
    $('#comments').prev().attr('style','display:inline;');
    $('#comments').before('<span class="cf-required" style="display:inline-block;margin:0 0 10px">*</span>');
    $('#comments').prop('required', true);

    $('.Reject').click(function(){
      if($('#comments').parsley().validate() != true)
      {
        return false;
      }
    });
});

2 0

View 1 previous reply

replied on August 18, 2017

Good afternoon,

I was following your steps on how to implement the code to make the Comments box required with the asterisk. The issue that we are running in to is that if you press the ".Reject" button several times, you end up with multiple asterisks.

Cay you reproduce this issue on your side. Just click "Reject" several times and see if you get multiple asterisks.

Thank you,

Raul Gonzalez

0 0

replied on September 11, 2017

Hi Ming,

I have finally gotten back to this issue. That little parsley function did the trick for validating the contents of the Comments box first. In the end, I moved the ".prop('required', true)" setting into the Reject click function, so that I only require Comments on Reject. Also created an Approve click function with ".prop('required', false)" to undo things if the user changes actions. So, the final js looks like:

$(document).ready(function () {
    $('#comments').prev().attr('style','display:inline;');
    $('#comments').before('<span style="display:inline-block;">&nbsp(required for Reject)</span>');
    $('#comments').before('<span class="cf-required" style="display:inline-block;margin:0 0 10px">*</span>');

    $('.Reject').click(function(){
      $('#comments').prop('required', true);
      if($('#comments').parsley().validate() != true)
      {
        return false;
      }
    });
  
    $('.Approve').click(function(){
      $('#comments').prop('required', false);
    });
    
});

I think I'll be using this all over the place, in lots of our Forms.

Thanks so much for the info!, .... Steven.

2 0

replied on September 13, 2017

Thanks @████████!

@████████ I think you want to only add the asterisk after Comments when you click Reject button, so you put the adding asterisk scripts into the Reject click function right?

If so, you will need a condition check to see whether the asterisk already exists. Then you will only add asterisk when it doesn't exist. In this way, you should avoid the situation to have multiple asterisk afterwards.

Below script is one way to do the check.

$(document).ready(function () {
    $('.Reject').click(function(){
      $('#comments').prop('required', true);
      if($('#comments').parsley().validate() != true)
      {
        // Adds the asterisk after Comments if it doesn't exist yet.
        if (document.getElementById('commentAsterisk') == null){
       	  $('#comments').prev().attr('style','display:inline;');
      	  $('#comments').before('<span id="commentAsterisk" class="cf-required" style="display:inline-block;margin:0 0 10px">*</span>');
      	}
        return false;
      }
    });
});

Let me know if you have more question.

1 0

replied on October 20, 2017

Ming,

Thank you for the workaround. It works perfectly. We decided to always show the asterisk, and make the Comments always required so we just added the initiation of the asterisk at the top of your code.


    // make comments required
    $('#comments').prev().attr('style','display:inline;');
    $('#comments').before('<span id="commentAsterisk" class="cf-required" style="display:inline-block;margin:0 0 10px">*</span>');
    
      $('.Reject, .Submit, .Approve').click(function(){
      $('#comments').prop('required', true);
      if($('#comments').parsley().validate() != true)
      {
        // Adds the asterisk after Comments if it doesn't exist yet.
        if (document.getElementById('commentAsterisk') == null){
       	  $('#comments').prev().attr('style','display:inline;');
      	  $('#comments').before('<span id="commentAsterisk" class="cf-required" style="display:inline-block;margin:0 0 10px">*</span>');
      	}
        return false;
      }
    });

Thank you,

Raul Gonzalez

1 0

Question

Question

making comments box required in Forms with javascript

Answer

Replies

Sign in to reply to this post.