Question

Unable to make checkbox fields with other option fully un-required using java script

Forms Version 10 How To

Updated March 5, 2021

asked on March 5, 2021 • Show version history

When it first makes them unrequired it seems to work as expected. However if I make them required then switch back to unrequired then the 'Other' selection is saying it's required from then on out. So it expects the "Other" field to always be checked. The "dayList<Input/Span>" variables are for the checkbox field. The "date<Input/Span>" variables are for a date field and that one is working just fine.

Note: The hide and show of the span is working as it should.

01function setRequired(dayText, isRequired) {
02   
03  /* find the fields that the required attribute is to be modified         */
04  /* Each field's input and the span                                      */
05  /* the span holds the astrix that is displayed when required            */
06  var dayListSpan = $('.day' + dayText + 'Symptoms span.cf-required');    
07  var dayListInput = $('.day' + dayText + 'Symptoms input');   
08 
09  var dateSpan = $('.day' + dayText + 'Date span.cf-required');
10  var dateInput = $('.day' + dayText + 'Date input'); 
11  var dayEnteredByInput = $('.day' + dayText + 'EnteredBy input');   
12   
13  if (isRequired)
14  {
15    dayListSpan.show();
16    dayListInput.attr('required', 'True');
17 
18    dateSpan.show();
19    dateInput.attr('required', 'True');  
20     
21    /* set the Entered by value to the current user */
22    dayEnteredByInput.val(currUser).change();
23  }
24  else
25  {
26    dayListSpan.hide();
27    dayListInput.removeClass('required').removeAttr('required');   
28     
29    dateSpan.hide();
30    dateInput.removeClass('required').removeAttr('required');
31     
32    /* clear the Entered by value  */
33    dayEnteredByInput.val('').change();   
34     
35 
36  };
37 
38};

Note: the reason for passing it "dayText" is that I have several tabs with the same data being entered and only the slight name change, so I'm passing in the different part of the name and using that to get the exact fields. The Users did not want to use a collection.

0 0

Answer

SELECTED ANSWER

replied on March 5, 2021

Hopefully this is my last update. I think I got it working I will need to do more testing to make sure but the new line of code to make sure to target just the check boxes is as follows.

`1`	`var` `dayListInput = $('.day'` `+ dayText +` `'Symptoms span.choice input:checkbox');`

1 0

Replies

replied on March 5, 2021 • Show version history

Are you marking them as required from the Layout page and then editing that in Javascript? Because that can be tricky sometimes.

In cases where I want a field to sometimes be required and other times not be required, I leave it not required on the Layout page and handle it entirely in Javascript. That just makes sure you have complete control of the process to add/remove as needed.

0 0

View 8 previous replies

replied on March 5, 2021

The problem with not initializing them as required on the layout page is that the span does not get created. So then there is nothing there to show. And it works fine for the date button, just not for the checkbox list. I think it has something to do with each checkbox being nested under the whole. Along with the 'other' option being almost it's own thing.

0 0

replied on March 5, 2021

You can add it in Javascript using code like this:

`1`	`$('.myField .cf-label').append('<span class="cf-required">*</span>');`

1 0

replied on March 5, 2021

Thanks, is there a way to make sure it only appends the first time? ... oh wait I could do that at the start of the page and simply hide it right away :)

1 0

replied on March 5, 2021 • Show version history

Yeah, just doing it at load works
-or-
You could check if it exists before adding it
-or-
You could remove it immediately before adding it (won't remove it if it doesn't exist, but will if it does - you always start with a clean state right before adding it).

1 0

replied on March 5, 2021

One of the thins I love about coding is there are so many ways to get the job done so it becomes a matter of style.

1 0

replied on March 5, 2021

Very true!

0 0

replied on March 5, 2021

Still not working right if I trigger it so it dynamically sets the check boxes to required then switch them back to unrequired. It continues to say that the "other" check box is required. I'm thinking it has something to do with "other" being handled differently. Is there a way to just deal with the other checkbox, I think when I do the line of "dayListInput.attr('required', 'True');" it's going down into that other option and setting it separately. but for some reason is not then removing it. I hope that was understandable.

01function setRequired(dayText, isRequired) {
02   
03  /* find the fields that the required attribute is to be modified         */
04  /* Each field's input and the span                                      */
05  /* the span holds the asterix that is displayed when required            */
06  var dayListSpan = $('.day' + dayText + 'Symptoms span.cf-required'); 
07  var dayListLabel = $('.day' + dayText + 'Symptoms .cf-label');   
08  var dayListInput = $('.day' + dayText + 'Symptoms input');   
09 
10  var dateSpan = $('.day' + dayText + 'Date span.cf-required');
11  var dateLabel = $('.day' + dayText + 'Date .cf-label');
12  var dateInput = $('.day' + dayText + 'Date input'); 
13   
14  var dayEnteredByInput = $('.day' + dayText + 'EnteredBy input'); 
15   
16  /* Remove span immediately before adding it. It won't remove it if it    */
17  /* doesn't exist, but will if it does - you always start with a clean    */
18  /* state right before adding it                                          */   
19  dayListSpan.remove();
20  dayListLabel.append('<span class="cf-required">*</span>');  
21  dayListSpan = $('.day' + dayText + 'Symptoms span.cf-required');
22   
23  dateSpan.remove();
24  dateLabel.append('<span class="cf-required">*</span>');  
25  dateSpan = $('.day' + dayText + 'Date span.cf-required');    
26   
27  if (isRequired)
28  {
29    dayListSpan.show();
30    dayListInput.attr('required', 'True');
31 
32    dateSpan.show();
33    dateInput.attr('required', 'True');  
34     
35    /* set the Entered by value to the current user */
36    dayEnteredByInput.val(currUser).change();
37  }
38  else
39  {
40    dayListSpan.hide();
41    dayListInput.removeClass('required').removeAttr('required');   
42     
43    dateSpan.hide();
44    dateInput.removeClass('required').removeAttr('required');
45     
46    /* clear the Entered by value  */
47    dayEnteredByInput.val('').change();   
48     
49 
50  };
51 
52};

0 0

replied on March 5, 2021

more oddness... even when it's required and I click on every check box and add in a value to the other(fever) field. It is still claiming it's required and not allowing a submit to happen.

0 0

replied on March 5, 2021

getting closer to solving this thought I would update. I changed how I'm targeting the checkbox input field and now the only issues are when they are required it is insisting that a value is added to the other/fever field and if I then make them not-required it still says that other/fever field is required but is fine with the checkbox next to it not being checked.

Here is the line I changed

`1`	`var` `dayListInput = $('.day'` `+ dayText +` `'Symptoms span.choice input');`

0 0

replied on March 5, 2021 • Show version history

the '.classNameHere span.choice input' has a type of 'checkbox', how do you use type to narrow down the choice?

0 0

SELECTED ANSWER

replied on March 5, 2021

Hopefully this is my last update. I think I got it working I will need to do more testing to make sure but the new line of code to make sure to target just the check boxes is as follows.

`1`	`var` `dayListInput = $('.day'` `+ dayText +` `'Symptoms span.choice input:checkbox');`

1 0

replied on March 5, 2021 • Show version history

Also, it sounds like you are talking about the other section of a checkbox field. I'm not certain (hard to say without seeing your whole process and entire sripts), but I wonder if the field acts the same way that tables do with custom Javascript - that you have the apply to code when rows are added and not just when the form is loaded - so that the code applies to the new rows - maybe that "other" field doesn't really exist yet when your code is being applied to remove the required status.

0 0

replied on March 5, 2021 • Show version history

Not sure what you mean about new rows added. I'm not using a collection or a table.

EDIT: ignore this comment... :)

0 0

replied on March 5, 2021

I was just using that for comparison.

And I checked, and I believe I was wrong - it does look like the other textbox exists the entire time the checkbox field exists, it's just readonly - I was thinking the textbox was added/removed as needed, but that doesn't appear to be the case.

1 0

You are not allowed to follow up in this post.

Sign in to reply to this post.

Asked March 5, 2021
Updated March 5, 2021
219 views