Question

Using JavaScript to make Radio Buttons required

Forms

Updated January 27, 2023

asked on January 24, 2023

HI all,

I have a customer who wants to make a set of radio buttons required based on another field selection. They are using the classic designer so the only way to accomplish is by using JS.

We added the following JS to test making the radio buttons required

$(document).ready(function() {
   
      $('#q15 input').attr('required', 'True');
      $('#q15 .cf-label').append('<span class="cf-required">*</span>');
        
});  //end of $(document).ready(function() {

but when the requirement is triggered it only selects the top radio button

When using the built in form required field on a radio button it displays as selecting all of the radio options

We have tried several different selectors but we are at a loss for how to replicate the behaviour. We would like to have consistency between setting the radio buttons required via JavaScript or through form controls as their form design has a few areas of radio buttons that may be required all the time but only selected ones would be required based on another selection.

Any help you can provide would be appreciated.

0 0

Replies

replied on January 27, 2023

Here is a generic method for your considerations. You should be able to make any radio field required given the number field ID. It should be generic enough for future updates to the radio field.

$(function(){

	window.MakeRadioFieldRequiredByFieldId = function(fieldIdInteger){
      	const fieldId = 'Field' + fieldIdInteger
    	let field = $('#'+ fieldId);
      	if (field.length < 1) {
        	console.warn('Radio field with ', fieldId, ' does not exist');
			return;
        } else {
          	//Add required *
          	$('label[for="' + fieldId +'"]>span').append('<span class="cf-required">*</span>');
          
        	let radioInputs = $('.choice>input[type="radio"]', field);
          	if (radioInputs.length) {
            	radioInputs
                  .attr('required', 'true')
              	  .addClass('group-required')
              	  .attr('data-parsley-class-handler', '#' + fieldId)
              	  .attr('data-parsley-errors-container', "#ParsleyErrorContainer" + fieldId);
              	
            }
          	
        }
      
      	
    };
  
  	setTimeout(function(){
    	debugger;
  		MakeRadioFieldRequiredByFieldId(5);
    }, 2000);
  
});

Some quick tests in Cloud:

2 0

replied on January 25, 2023 • Show version history

It seems Jonathan Roberts has the best JS solution here.

As an alternative solution to using JS, in the past if I had a field that could be required or not depending on another field, I would make two version of that field. By default I would have one that was not required show on the form and use field rules to hid the required one. I would also have a rule to hide the non-required version and show the required version with a field rule based on the values of another field.

This does have its limitations though.

1 0

replied on January 24, 2023

I haven't tried it, but it looks like you need...

$('#q15 input').addClass('group-required');

0 0

View 5 previous replies

replied on January 24, 2023

Thanks James but unfortunately that did not do the trick

0 0

replied on January 24, 2023

Yeah, as you see the radio button element is pretty complicated.

Maybe try adding the other two classes bfOnKeyUp and changeEvent. Otherwise it looks like you have to dive in to Parsley.

https://parsleyjs.org/

0 0

replied on January 24, 2023

This worked for me...

$(document).ready(function(){
  $('#Field9 input').attr('required', 'True');
  $('#field9-1 input').attr('class','group-required');
  $('#field9-2 input').attr('class','group-required');
  $('#field9-3 input').attr('class','group-required');
  $('#q9 .cf-label').append('<span class="cf-required">*</span>');
});

1 0

replied on January 25, 2023

Great

0 0

replied on January 25, 2023

Thanks Jonathan, unfortunately that did not work for me. I should note this is in LF Cloud. There must be a difference in the codebase there. I did update the selectors to match what was being returned by the inspector.

I tried the same in on-prem LF 11 and it worked as you mentioned, but I also tested it by commenting out the "group-required" lines and that worked as well. Seems this is not as much of an issue in on-prem

0 0

replied on January 26, 2023

Hi Jim,

I believe the JavaScript is the same as the Modern Designer (Update 3) on-prem. It's not the same as full JavaScript that we are used to on the Classic Designer.

I can't see a way (yet) to set the required value on a field using the Modern JS.

Javascript in the Forms Designer (laserfiche.com)

Have a look at the LF Help docs. I'll have a play later if I get time :)

0 0

replied on January 26, 2023

I can't see a way to use the Modern Designer JavaScript to add the "required" class to a field.

It looks like the "LFForm.changeFieldSettings" would be the way to go, but it doesn't support 'required true/false' at this point in time.

Travis idea is a good work around for now :)

0 0

replied on January 27, 2023

Thanks for the responses everyone.

I did show the customer that in the modern designer you can use field rules to set a field required based on another field but they decided not to convert the form and start testing over again.

In the end they decided to switch to drop-downs instead of radio buttons to get a more consistent result.

0 0

You are not allowed to follow up in this post.

Question

Question

Using JavaScript to make Radio Buttons required

Replies

Sign in to reply to this post.