Question

Conditionally Required Fields in Forms

Forms Laserfiche

Updated April 7

asked on June 17, 2021

Hello,

I was wondering if it was possible (using JavaScript) to set fields in Forms to be required only when specific values are selected in another field.

For example - If I select Consultant Access, Vacation Coverage or New Temporary Employee in the Purpose field, make the End Date field required.

Please let me know if this can be done using JavaScript.

Thanks in advance!

0 0

Answer

SELECTED ANSWER

replied on June 17, 2021

I have several forms where I have a field that I want always visible, but only sometimes required. Here's some simple javascript to help with that.

Create a drop-down field, give it the 3 options you listed as required (Consultant Access, Vacation Coverage or New Temporary Employee) along with some other options as well. Give it the CSS class name of requiredSource.

Create a single-line field, give it the CSS class name of requiredDestination.

Add this Javascript:

$(document).ready(function () {
  
  //when the dropdown field with requiredSource class is changed:
  //If it's value is Consultant Access, Vacation Coverage or New Temporary Employee then set the
  //single line field with requiredDestination class as required, otherwise set it not required.
  $('.requiredSource select').change(function() {
    if($(this).val() == 'Consultant Access' || $(this).val() == 'Vacation Coverage' || $(this).val() == 'New Temporary Employee')
    {
      $('.requiredDestination').each(function() {
        $(this).find('input').attr('required', 'true');
        $(this).find('input').addClass('required');
        $(this).find('.cf-label').find('span').find('span').first().append('<span class="cf-required">*</span>');
      });
    }
    else
    {
      $('.requiredDestination').each(function() {
        $(this).find('input').removeAttr('required');
        $(this).find('input').removeClass('required');
        $(this).find('.cf-label').find('.cf-required').remove();
        $(this).find('input').parsley().validate();
      });
    }
  });
  
});

Now the single line field is required when the drop-down field has one of those three options selected.

Otherwise it is optional.

5 0

View 1 previous reply

replied on June 17, 2021

@████████ Check out what you can do when you use .prop instead of .attr and take advantage of jQuery's .toggle method.

$(document).ready(function () {
  $('.requiredDestination .cf-label > span').append('<span class="cf-required">*</span>');
  $('.requiredDestination .cf-required').hide();
  
  // set change event on dropdown
  $('.requiredSource select').on('change',function() {
    var reqList = ['Consultant Access','Vacation Coverage','New Temporary Employee'];
    var required = reqList.includes($(this).val());
    
    $('.requiredDestination input').prop('required',required);
    $('.requiredDestination .cf-required').toggle(required);
    
    if (!required) $('.requiredDestination input').parsley().validate();
  });
});

3 0

replied on June 17, 2021 • Show version history

Always learning new stuff from you @████████

I freely admit my code is not the most efficient, I find something that works and I just copy/paste it a million times. haha

I've never used toggle before, I'll have to play around with that one.

1 0

replied on June 17, 2021 • Show version history

@████████ I totally understand, and I still learn new things all the time lol.

I still copy/paste stuff from old forms that probably isn't the most "efficient" approach, but sometimes if you know something works then that's good enough, especially when time is a factor.

2 0

Replies

replied on June 17, 2021 • Show version history

Just to clarify, if they select one of those options End Date is required, but if they select something else, is the field "optional" or not needed at all?

If the field is only ever needed when those options are selected, you could just set it as required and hide/show it with field rules, then you wouldn't need JavaScript at all.

1 0

replied on April 4

@████████ I have found your post from June 17, 2021 about jQuery's .toggle method helpful. I noticed it works well on single line and number fields, but not on dropdown, radio, or multi-line fields. I have a dropdown field as the requiredSource that would ideally control the requirement of various fields below it. Are you able to help me edit the JS to work for all field types?

0 0

View 1 previous reply

replied on April 7

What is the code you are using? I'm not sure what is happening.

For the dropdowns and multiline the issue could be that your code is targeting "input" type elements, but dropdowns are "select" elements and multiline fields are "textarea" elements.

As for radio buttons, that is more complicated because you'd need to target multiple fields, not just the field that triggered the event.

0 0

replied on April 7

Hello Jason,

Thanks for your help. I took your code from above add changed the css class for the fields I wanted to toggle required on and off to requiredField. Is there any way to have requirement toggle off and on regardless of the input type? I greatly appreciate your help.

$(document).ready(function () {
$('.requiredField .cf-label > span').append('<span class="cf-required">*</span>');
$('.requiredField .cf-required').hide();

// set change event on dropdown
$('.requiredSource select').on('change',function() {
var reqList = ['Plant Online'];
var required = reqList.includes($(this).val());

$('.requiredField input').prop('required',required);
$('.requiredField .cf-required').toggle(required);

if (!required) $('.requiredField input').parsley().validate();
});
});

0 0

replied on April 7

You could use a jQuery pseudo selector

$('.requiredField :input')

note the ":" in front of "input"

However, I don't have any code on hand for the radio buttons.

0 0

replied on April 7

Thank you Jason. I appreciate the help.

0 0

You are not allowed to follow up in this post.

Question

Question

Conditionally Required Fields in Forms

Answer

Replies

Sign in to reply to this post.