You are viewing limited content. For full access, please sign in.

Question

Question

Conditionally Required Fields in Forms

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.

 

4 0
replied on June 17, 2021

Once again - this worked perfectly! Thanks you again for your assistance.

1 0
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();
  });
});
2 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.

0 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.

1 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
You are not allowed to follow up in this post.

Sign in to reply to this post.